Spinner
A collection of 8 spinners for every loading state. The infinite variant is an SVG path animation tracing the infinity symbol ∞, perfectly matching the original reference.
Infinite Spinner
GlobalA premium ∞ spinner tracing the infinity path. We've enabled this globally on the library — navigate between pages using the navigation bar and you'll see this spinner appear dynamically.
<Spinner variant="infinite" />All Variants
Infinite
Premium ∞ spinner — used globally for page transitions.
Default
Standard spinning arc.
Ring
A clean spinning ring with a gap.
Throbber
Three bouncing dots.
Pinwheel
Fading radial bars.
Circle Filled
Solid arc rotation.
Ellipsis
Four sequentially pulsing dots.
Bars
Animated progress bars.
Usage
spinner-example.tsxTSX
import { Spinner } from "@/components/kibo-ui/spinner";
// Basic usage (default arc)
<Spinner />
// With variant
<Spinner variant="infinite" />
<Spinner variant="ring" />
<Spinner variant="throbber" />
// Sizing
<Spinner variant="infinite" size="sm" />
<Spinner variant="infinite" size="md" />
<Spinner variant="infinite" size="lg" />