Spinner
RingSpinner
SM
MD
LG
SquareFlipSpinner
SM
MD
LG
DuelRingSpinner
SM
MD
LG
OrbitSpinner
SM
MD
LG
BarSpinner
SM
MD
LG
BounceSpinner
SM
MD
LG
DotSpinner
SM
MD
LG
RingFadeSpinner
SM
MD
LG
ClockSpinner
SM
MD
LG
RippleSpinner
SM
MD
LG
How to use
Import any spinner for loading states. Sizes: sm, md, lg. Use currentColor so spinners inherit text color.
1. Import
tsx
import { RingSpinner, SquareFlipSpinner, DuelRingSpinner, OrbitSpinner, BarSpinner, BounceSpinner, DotSpinner, RingFadeSpinner, ClockSpinner, RippleSpinner } from "@/app/components/ui";2. RingSpinner
tsx
<RingSpinner />
<RingSpinner size="sm" />
<RingSpinner size="lg" />3. SquareFlipSpinner
tsx
<SquareFlipSpinner />
<SquareFlipSpinner size="sm" />
<SquareFlipSpinner size="lg" />4. DuelRingSpinner
tsx
<DuelRingSpinner />
<DuelRingSpinner size="sm" />
<DuelRingSpinner size="lg" />5. OrbitSpinner
tsx
<OrbitSpinner />
<OrbitSpinner size="sm" />
<OrbitSpinner size="lg" />6. BarSpinner
tsx
<BarSpinner />
<BarSpinner size="sm" />
<BarSpinner size="lg" />7. BounceSpinner
tsx
<BounceSpinner />
<BounceSpinner size="sm" />
<BounceSpinner size="lg" />8. DotSpinner
tsx
<DotSpinner />
<DotSpinner size="sm" />
<DotSpinner size="lg" />9. RingFadeSpinner
tsx
<RingFadeSpinner />
<RingFadeSpinner size="sm" />
<RingFadeSpinner size="lg" />10. ClockSpinner
tsx
<ClockSpinner />
<ClockSpinner size="sm" />
<ClockSpinner size="lg" />11. RippleSpinner
tsx
<RippleSpinner />
<RippleSpinner size="sm" />
<RippleSpinner size="lg" />