Spaces:
Running
Running
File size: 1,072 Bytes
db66673 1828161 db66673 1828161 db66673 2961a5b 1828161 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <script lang="ts">
import type { Snippet } from 'svelte';
import spinners, { type BrailleSpinnerName } from 'unicode-animations';
let {
className,
children,
name = 'braille'
}: { className?: string; children?: Snippet; name?: BrailleSpinnerName } = $props();
let frame = $state.raw<number>(0);
const spinner = spinners[name];
$effect(() => {
const interval = setInterval(() => {
frame = (frame + 1) % spinner.frames.length;
}, spinner.interval);
return () => clearInterval(interval);
});
</script>
<span class={className}>
{spinner.frames[frame]}
{@render children?.()}
</span>
<!-- <span class="loader {className}"></span>
<style>
.loader {
width: 20px;
padding: 4px;
aspect-ratio: 1;
border-radius: 50%;
background: #94a3b8;
--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
-webkit-mask: var(--_m);
mask: var(--_m);
-webkit-mask-composite: source-out;
mask-composite: subtract;
animation: l3 1s infinite linear;
}
@keyframes l3 {
to {
transform: rotate(1turn);
}
}
</style> -->
|