How to use the CSS Loader Generator
- Click a loader in the gallery — every tile is live.
- Adjust size, thickness, speed and colours; all tiles update together.
- Rename the CSS class if it clashes with your project.
- Copy the HTML and CSS (or the React version) and drop it into your page.
Why a pure CSS loader?
A CSS spinner is a few hundred bytes, needs no image request or JavaScript, scales sharply to any size and can be recoloured with one variable. Every loader here is built from a single element (plus a few spans for dots and bars) and animated with transform and opacity, which keeps it smooth even when the main thread is busy loading your app.
Customising with CSS variables
The generated CSS exposes --size, --color, --track, --thickness and --speed on the loader class, so you can make a small white variant for buttons without copying the CSS: <span class="loader" style="--size:18px;--color:#fff">.
Accessibility
- The loader has
role="status"and a visually hidden “Loading…” label, so screen readers announce it. - With reduced motion on, the animation slows down instead of stopping — a frozen spinner looks like a crash.
- Show a loader only after ~300 ms; flashing it for fast requests feels slower than showing nothing.
Want a custom loading animation? Build one in the CSS animation generator and fine-tune its easing with the cubic-bezier generator.
Tools that pair well with the CSS Loader Generator
- CSS Gradient Generator — Design a gradient visually — drag colour stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback colour.
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS Keyframes Generator — A visual editor for @keyframes.
- CSS Hover Animation Generator — Design hover animations for buttons, cards, links and icons.
Frequently asked questions
Can I use these loaders in commercial projects?
Yes. The CSS is generated for you, with no licence or attribution required.
How do I show the loader only while something loads?
Render the loader element while waiting and remove it (or add the
hidden attribute) when the data arrives. In React, render it conditionally: {loading && <Loader />}.Will it work inside a button?
Yes. Set a small size and a colour that matches the button text via the CSS variables, e.g.
style="--size:16px;--thickness:2px;--color:currentColor".