61 lines
1.1 KiB
Svelte
61 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { ClassValue } from 'svelte/elements';
|
|
|
|
interface Props {
|
|
size?: string;
|
|
class?: ClassValue;
|
|
}
|
|
|
|
let { size = '2em', class: classValue }: Props = $props();
|
|
const radius = 18;
|
|
</script>
|
|
|
|
<svg
|
|
class={['sui-spinner stroke-white', classValue]}
|
|
width={size}
|
|
height={size}
|
|
viewBox="0 0 40 40"
|
|
>
|
|
<circle cx="20" cy="20" r={radius} fill="none" stroke-width="4" stroke-linecap="round">
|
|
<animate
|
|
attributeName="stroke-dasharray"
|
|
values="22,90; 38,74; 22,90"
|
|
keyTimes="0;0.75;1"
|
|
dur="2s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
<animate
|
|
attributeName="stroke-dashoffset"
|
|
values="0;-56.5;-113"
|
|
keyTimes="0;0.75;1"
|
|
dur="2s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</circle>
|
|
</svg>
|
|
|
|
<style>
|
|
.sui-spinner {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
animation: spinner-rotate 2s cubic-bezier(0.55, 0.15, 0.35, 1) infinite;
|
|
}
|
|
@keyframes spinner-rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
/* 15% {
|
|
transform: rotate(60deg);
|
|
} */
|
|
50% {
|
|
transform: rotate(180deg);
|
|
}
|
|
/* 80% {
|
|
transform: rotate(300deg);
|
|
} */
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|