CSS loader and spinner generator
Pick a ring, dots, bars, pulse or orbit loader, set size, colour and speed, and export CSS or a React component. Free to use, no account.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this generator
Choose a ring, dots, bars, pulse or orbit loader and set its size, colour and speed. The colour can come from a theme token, so the loader matches a button or a page in light and dark mode.
Loaders are built to be accessible: the output has role=status with screen reader text, and it falls back to a fade when the visitor prefers reduced motion. Export plain CSS or a TSX component.
How to use it
- Pick a loader style.
- Set size, colour and speed.
- Check the preview in light and dark.
- Copy the CSS or the React component.
This generator is also a component of the kit: Generator Css Loader, installed as source in your project.
Want this inside your project?
Agentic UI Kit installs this generator and the other 1156 components as source files, with one theme for all of them. One-time license, unlimited projects.