devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Auditoría web

Esta página aún no está traducida al español, así que la mostramos en 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.

Actualizado el 

  



    
 Tus datos nunca salen de tu ordenador. Todo se procesa localmente en tu navegador.

    
    
    

      
Cómo 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.
También se busca como: css loader, css spinner, loading spinner css, loading animation css, pure css spinner, css preloader.
Herramientas que combinan con: 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.
Preguntas frecuentes
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".
¿Puedo instalar CSS Loader Generator como aplicación web y utilizarla sin conexión?
Sí. CSS Loader Generator es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.

      
    

    
    
Herramientas 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…