chore: add static option to `MkLoading`
This commit is contained in:
parent
1521bb088c
commit
0960d61ce2
|
@ -23,6 +23,7 @@ export const Default = {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
args: {
|
args: {
|
||||||
|
static: true,
|
||||||
},
|
},
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered',
|
layout: 'centered',
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
|
<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<svg :class="[$style.spinner, $style.fg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
|
<svg :class="[$style.spinner, $style.fg, { [$style.static]: static }]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
|
||||||
<g transform="matrix(1.125,0,0,1.125,12,12)">
|
<g transform="matrix(1.125,0,0,1.125,12,12)">
|
||||||
<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
|
<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
|
||||||
</g>
|
</g>
|
||||||
|
@ -19,11 +19,13 @@
|
||||||
import { } from 'vue';
|
import { } from 'vue';
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
|
static?: boolean;
|
||||||
inline?: boolean;
|
inline?: boolean;
|
||||||
colored?: boolean;
|
colored?: boolean;
|
||||||
mini?: boolean;
|
mini?: boolean;
|
||||||
em?: boolean;
|
em?: boolean;
|
||||||
}>(), {
|
}>(), {
|
||||||
|
static: false,
|
||||||
inline: false,
|
inline: false,
|
||||||
colored: true,
|
colored: true,
|
||||||
mini: false,
|
mini: false,
|
||||||
|
@ -97,5 +99,9 @@ const props = withDefaults(defineProps<{
|
||||||
|
|
||||||
.fg {
|
.fg {
|
||||||
animation: spinner 0.5s linear infinite;
|
animation: spinner 0.5s linear infinite;
|
||||||
|
|
||||||
|
&.static {
|
||||||
|
animation-play-state: paused;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue