1001Ferramentas
Tools Categories Guides FAQ
About Contact Privacy Policy Terms of Use
⏳ Dev

CSS Loader Generator

Create pure-CSS spinners and loaders in 8 styles (ring, dots, pulse, bars, etc.). Adjust color, size and speed. No libs, no GIFs. Everything in your browser.

Preview

Pure CSS, zero JS

Every loader in this generator is built from @keyframes and plain CSS properties — no GIFs, no SVGs, no libraries. They run in any modern browser and stay sharp at any DPI.

Each style gives you the minimal HTML plus the complete CSS, animation included. Paste it into your project and adjust colour and size through variables or by editing the values directly. It all happens in the browser.

Spinners and loaders in pure CSS

The indicator spinning while a page loads doesn't have to be a heavy GIF or one more library. You can pull it off with pure CSS, light and crisp at any resolution. This generator builds animated spinners and loaders and throws in several ready-made styles to pick from.

There are eight different styles: ring, dots, pulse, bars and a few others. You set the colour, the size and the animation speed until they fit your interface. Once that's done, you copy the CSS, which comes with no external dependencies and no images.

The whole thing stays in the browser. It's a practical way to drop a good-looking loading indicator into your site while keeping the code light and in your hands.

Frequently asked questions

I changed the thickness and the loader did not move. Why is that?
Because thickness only applies to five of the eight styles: ring, dual ring, spinner, ripple and bars, where it becomes the width of each bar. Dots, pulse and ellipsis are built from filled circles whose diameter comes from a fraction of the size slider instead — a quarter of it for dots, a fifth for ellipsis. For those three, the size slider is what scales the animation, running from 20 to 120 pixels and starting at 60.
Can I change the grey colour sitting behind the ring?
Not in the generator, but it is a one-line fix in the code. The ring style hard-codes #e5e7eb on the whole border and applies your chosen colour only to border-top-color, the part that spins. Swap that value after pasting. The dual ring has no grey at all: its border is transparent and only the top and bottom edges take your colour, so the page background shows through the two empty sides.
What does the negative animation-delay in the dots and bars CSS mean?
It is the trick that starts the pieces out of step. A negative delay tells the browser to treat the animation as if it had already been running for that long, so nothing sits frozen waiting its turn on the first cycle. For dots the values are fixed at -0.32s and -0.16s; for bars they follow the speed you pick, at 75%, 50% and 25% of the cycle, which defaults to 1.2 seconds.

Related Tools

〰️

Cubic Bezier Generator

Create and visualize cubic-bezier curves for CSS animations. Drag control points, preview the animation and copy the value. Includes presets (ease, ease-in, ease-out). Everything in your browser.
▲

CSS Triangle Generator

Create pure CSS triangles using the border trick. Choose direction (up, down, left, right), size and color. Useful for tooltips, arrows and pointers. Everything in your browser.
🪟

CSS Glassmorphism Generator

Create frosted-glass effects with backdrop-filter, transparency and borders. Adjust blur, saturation and opacity. Live preview and copy-ready CSS. Everything in your browser.
🔘

CSS Button Generator

Create custom CSS buttons: color, text, padding, border-radius, shadow and hover. Live preview and ready-to-copy HTML+CSS. Everything in your browser.
⬜

CSS Border Radius Generator

Create custom rounded shapes with 8 independent controls (4 corners × 2 axes). Live preview and ready-to-copy CSS. Everything in your browser.
📦

CSS Minifier

Minify CSS by removing comments, extra whitespace and line breaks. Reduces file size without changing behavior.