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

Cette page n’est pas encore traduite en français : elle s’affiche en anglais.

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.

Mis à jour le 

  



    
 Vos données ne quittent jamais votre ordinateur. Tout le traitement se fait localement dans votre navigateur.

    
    
    

      
Comment utiliser : 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.
Aussi recherché comme : css loader, css spinner, loading spinner css, loading animation css, pure css spinner, css preloader.
Outils complémentaires : 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.
Questions fréquentes
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".
Puis-je installer CSS Loader Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. CSS Loader Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.

      
    

    
    
Outils similaires
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…