devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Auditoria do site

Esta página ainda não foi traduzida para o português, por isso aparece em inglês.

CSS Loader & Spinner Generator

Pick from 13 pure-CSS loading spinners, adjust size, colors, thickness and speed, and copy lightweight, accessible HTML and CSS — no images, SVG or JavaScript.

Atualizado em 

  



    
 Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

    
    
    

      
Como usar: CSS Loader Generator
  1. Click a loader in the gallery — every tile is live.
  2. Adjust size, thickness, speed and colors; all tiles update together.
  3. Rename the CSS class if it clashes with your project.
  4. 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 recolored 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.


Customizing 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.
Também pesquisado como: css loader, css spinner, loading spinner css, loading animation css, pure css spinner, css preloader.
Ferramentas que combinam com: CSS Loader Generator
  • CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
  • 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.
Perguntas frequentes
Can I use these loaders in commercial projects?
Yes. The CSS is generated for you, with no license 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 color that matches the button text via the CSS variables, e.g. style="--size:16px;--thickness:2px;--color:currentColor".
Posso instalar o CSS Loader Generator como um aplicativo da web e usá-lo offline?
Sim. O CSS Loader Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

      
    

    
    
Ferramentas relacionadas
localCSS Animation GeneratorDesign CSS animations on a real keyframe timeline. Start from 50+ presets, scrub through every frame,…localCubic Bezier GeneratorShape an easing curve by dragging two handles and race it against standard easings. Need physics? Switch…localCSS Gradient GeneratorDesign a gradient visually — drag color stops, change the angle or type, start from a preset — and copy…localBox Shadow GeneratorStack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the…localCSS Keyframes GeneratorA visual editor for @keyframes. Add keyframes on a timeline, set transforms, opacity, blur and color at…localCSS Hover Animation GeneratorDesign hover animations for buttons, cards, links and icons. Pick an effect, try it on different elements…