Spinner collection
Eight compact loading patterns with size, speed, color, and pause controls.
orbit
dots
bars
ring
pulse
ripple
grid
wave
Implementation
1import type { CSSProperties } from "react";2 3export const spinnerVariants = [4 "orbit",5 "dots",6 "bars",7 "ring",8 "pulse",9 "ripple",10 "grid",11 "wave",12] as const;13export type SpinnerVariant = (typeof spinnerVariants)[number];14 15export type SpinnerCollectionProps = {16 variant?: SpinnerVariant;17 label?: string;18 size?: "sm" | "md" | "lg";19 speed?: "slow" | "normal" | "fast";20 color?: string;21 paused?: boolean;22 decorative?: boolean;23};24 25const count: Record<SpinnerVariant, number> = {26 orbit: 2,27 dots: 3,28 bars: 3,