mary.my.id
handy online tools for AT Protocol
boat.kelinci.net
atproto
bluesky
atcute
typescript
solidjs
1export interface CircularProgressProps {
2 size?: number;
3}
4
5const CircularProgress = (props: CircularProgressProps) => {
6 return (
7 <svg
8 viewBox="0 0 32 32"
9 class="animate-spin"
10 style={`height:${props.size ?? 24}px;width:${props.size ?? 24}px`}
11 >
12 <circle cx="16" cy="16" fill="none" r="14" stroke-width="4" class="stroke-purple-600 opacity-20" />
13 <circle
14 cx="16"
15 cy="16"
16 fill="none"
17 r="14"
18 stroke-width="4"
19 stroke-dasharray="80px"
20 stroke-dashoffset="60px"
21 class="stroke-purple-600"
22 />
23 </svg>
24 );
25};
26
27export default CircularProgress;