| 1 | import { cn } from "@/lib/utils"; |
| 2 | |
| 3 | export const Spinner = ({ |
| 4 | className, |
| 5 | text, |
| 6 | size = 24, |
| 7 | }: { |
| 8 | className?: string; |
| 9 | text?: string; |
| 10 | size?: number; |
| 11 | }) => { |
| 12 | const segments = 12; |
| 13 | const segmentWidth = 2; |
| 14 | |
| 15 | return ( |
| 16 | <div className={cn("flex items-center gap-1", className)}> |
| 17 | <svg |
| 18 | className={`animate-spin`} |
| 19 | viewBox="0 0 50 50" |
| 20 | height={size} |
| 21 | width={size} |
| 22 | > |
| 23 | {[...Array(segments)].map((_, index) => ( |
| 24 | <rect |
| 25 | key={index} |
| 26 | x="23.5" |
| 27 | y="5" |
| 28 | width={segmentWidth} |
| 29 | height="10" |
| 30 | rx="1" |
| 31 | ry="1" |
| 32 | fill="currentColor" |
| 33 | transform={`rotate(${index * (360 / segments)} 25 25)`} |
| 34 | opacity={1 - (index * 0.75) / segments} |
| 35 | /> |
| 36 | ))} |
| 37 | </svg> |
| 38 | {text && <span className="text-inherit">{text}</span>} |
| 39 | </div> |
| 40 | ); |
| 41 | }; |
| 42 |