/
Foundations
Components
Blocks
Pages
Screens
Library
Playground
Grab Pro Now
Customize your admin
Grab Pro Now
Customize your admin
Loading states — spinners, skeletons, and progress indicators.
Four tiles rotate while the box pulses between 64px and 30px. Colors come from --primary and --muted-foreground, so it follows the active theme and light/dark.
A ring with a neutral top arc and a --primary bottom arc, spinning as one. Both arcs are theme tokens instead of fixed colors.
A neutral outer ring and a --primary inner ring spin in opposite directions. Both colors are theme tokens instead of fixed colors.
A square slides up inside a rounded box while a dot sweeps across. The accent shapes use --primary; the box uses --muted-foreground.
A box tumbles forward over a squashing ground shadow. The box is --primary; the shadow is --foreground at low opacity.
Squares fill a tilted grid while another square flips around its perimeter. The sole color is --primary.
Three concentric square rings rotate at different speeds. Neutral rings use --muted-foreground, the middle uses --primary.
Two squares scale up and fade out on offset timers. One uses --muted-foreground, the other --primary.
A trail of dots rolls across via animated box-shadows. The sole color is --primary, driven through currentColor.
Two dots orbit on tilted rings. The neutral ring uses --muted-foreground, the accent ring uses --primary.
The classic multi-shadow dot spinner. The sole color is --primary, driven through currentColor.