Stefan’s Spinners
A little personality for the moments in between.
The idea
Loading states are small, but they are part of the experience. I wanted a collection with enough personality to make waiting feel considered, while staying simple to use in a real interface.
A place to try things
The gallery brings 60 loading indicators into one searchable collection. Each component has its own page, so browsing a shape, adjusting its motion, and finding the implementation all happen in the same place.
Controls that match the component
Size, color, speed, easing, and opacity sit beside the live preview. Shape controls go further: an orbit has tilt, a bloom has petal dimensions, and an arc has its own stroke and length. The controls expose what makes each animation different.
From preview to React
The editable React example stays connected to the preview. Literal prop changes update the component and its controls; an incomplete edit keeps the last valid preview. The editor reads supported values without executing arbitrary JavaScript.
Built for real interfaces
The published package includes TypeScript declarations, ESM and CommonJS builds, and automatic browser styles. Animation runs in CSS, with no animation runtime. Accessible labels, decorative mode, pause controls, reduced-motion support, and server rendering are part of the component API.
Support this project