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
49
50
51
52
|
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-fill-mode": square.corner ? undefined : "both",
"animation-delay": square.corner ? undefined : `${square.delay}s`,
}}
/>
)}
</For>
</svg>
)
}
|
