CSS Loader Generator
Pure-CSS spinners and loading bars with size, speed and colour, accessible markup.
About this tool
Choose a loader from the gallery: ring, dual ring, bouncing dots, bars, pulse or an indeterminate progress bar. Set its size, speed, colour and track colour. All the previews update together, and the CSS and HTML for the selected one are ready to copy.
Building loading indicators that feel fast
A CSS loader needs no images, fonts or JavaScript. The generated code animates only transform and opacity, which browsers can run on the graphics processor without slowing the page. The markup includes role="status" and an aria-label so screen readers announce that content is loading. A prefers-reduced-motion rule slows the animation for people who have asked their device to reduce motion, which can matter for anyone affected by vestibular disorders. How you use a loader matters as much as how it looks. Wait about 300 milliseconds before showing it, so quick actions don't flash a spinner. Use a determinate progress bar when you know how far along a task is, because visible progress makes waits feel shorter. For pages full of content, skeleton screens, grey placeholders shaped like the content, often feel faster than a spinner. Match the loader's colour to your brand and keep it small next to the content it stands in for. The CSS button generator styles the buttons that trigger loading, the CSS gradient generator adds colour and the cubic-bezier editor shapes custom easing curves.
Frequently asked questions
How do I make a spinner with pure CSS?
Give a square element a border, colour one side, make it round with border-radius: 50%, and rotate it forever with a @keyframes animation.
Are CSS loaders accessible?
They can be: add role="status" and an aria-label, and respect prefers-reduced-motion. The generated code does both.
When should I show a loading spinner?
After a short delay (around 300 ms), only for waits you can't avoid. Prefer a progress bar when you know how long something takes.
Is my design saved?
No. Everything runs in your browser and nothing is stored or sent.