52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import { ComponentProps, For } from "solid-js"
|
|
|
|
const outerIndices = new Set([1, 2, 4, 7, 8, 11, 13, 14])
|
|
const cornerIndices = new Set([0, 3, 12, 15])
|
|
const squares = Array.from({ length: 16 }, (_, i) => ({
|
|
id: i,
|
|
x: (i % 4) * 4,
|
|
y: Math.floor(i / 4) * 4,
|
|
delay: Math.random() * 1.5,
|
|
duration: 1 + Math.random() * 1,
|
|
outer: outerIndices.has(i),
|
|
corner: cornerIndices.has(i),
|
|
}))
|
|
|
|
export function Spinner(props: {
|
|
class?: string
|
|
classList?: ComponentProps<"div">["classList"]
|
|
style?: ComponentProps<"div">["style"]
|
|
}) {
|
|
return (
|
|
<svg
|
|
{...props}
|
|
viewBox="0 0 15 15"
|
|
data-component="spinner"
|
|
classList={{
|
|
...(props.classList ?? {}),
|
|
[props.class ?? ""]: !!props.class,
|
|
}}
|
|
fill="currentColor"
|
|
>
|
|
<For each={squares}>
|
|
{(square) => (
|
|
<rect
|
|
x={square.x}
|
|
y={square.y}
|
|
width="3"
|
|
height="3"
|
|
rx="1"
|
|
style={{
|
|
opacity: square.corner ? 0 : undefined,
|
|
animation: square.corner
|
|
? undefined
|
|
: `${square.outer ? "pulse-opacity-dim" : "pulse-opacity"} ${square.duration}s ease-in-out infinite`,
|
|
"animation-delay": square.corner ? undefined : `${square.delay}s`,
|
|
}}
|
|
/>
|
|
)}
|
|
</For>
|
|
</svg>
|
|
)
|
|
}
|