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
CSS puro, zero JS
Todos os loaders deste gerador usam apenas @keyframes e propriedades CSS — sem GIFs, SVGs ou bibliotecas. Funcionam em qualquer browser moderno e ficam suaves em qualquer DPI.
Cada estilo gera o HTML mínimo e o CSS completo (incluindo animação). Cole no seu projeto e ajuste cor/tamanho via variáveis ou substituindo os valores. Tudo no navegador.
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.
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.