src/lib/components/loading/Spinner.svelte

<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> -->