Free tool

CSS Loader Generator

Animated spinners and loaders with pure CSS: pick a type, tune color, size and speed, then copy the HTML + CSS.

<div class="loader"></div>

.loader {
  width: 48px;
  height: 48px;
  border: 4px solid #7c3aed33;
  border-bottom-color: #7c3aed;
  border-radius: 50%;
  display: inline-block;
  animation: loader-rotation 1s linear infinite;
}

@keyframes loader-rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Built by

Miguel Ángel Colorado Marin (MACM)

Full-Stack Developer · Guadalajara, España

I develop web apps, digital tools and full projects — from design to deployment.

GitHubLinkedInBuy me a coffee
Contact me

A good loading indicator improves the perceived speed of any website or app. These loaders are built exclusively with CSS animations (keyframes) — no JavaScript, no GIFs, no external libraries: they weigh a few hundred bytes, look crisp on retina screens and match your project's palette because you define the exact color. Choose between the classic ring, dual ring, bouncing dots, equalizer bars, pulse or ripple waves, adjust the variables and copy the ready-to-embed HTML + CSS snippet.

Features

  • ✓6 different animation types
  • ✓Pure CSS, no JavaScript or images
  • ✓Adjustable color, size and duration
  • ✓Live preview of the result
  • ✓Ready-to-paste HTML + CSS

How to generate a CSS loader?

  1. 1

    Pick the animation type

    Six styles: ring, dual ring, dots, bars, pulse or ripple.

  2. 2

    Tune color, size and speed

    The preview updates instantly.

  3. 3

    Copy the code

    The button copies the HTML and CSS together.

  4. 4

    Paste it into your project

    Add the CSS to your stylesheet and the div where needed.

Frequently asked questions

Why use CSS instead of a GIF or Lottie?

CSS loaders add zero network requests, scale without quality loss and inherit your color palette. For very complex animations Lottie is still better; for a spinner, CSS is lighter.

Can I make it respect prefers-reduced-motion?

Yes, wrap the animation in @media (prefers-reduced-motion: reduce) { .loader { animation: none; } } and show static "Loading..." text for motion-sensitive users.

Does it work in all browsers?

CSS keyframes have had universal support for years, including mobile browsers. No experimental properties are used.

Related tools

Glassmorphism Generator

Frosted-glass effect with blur and transparency.

CSS Gradient Generator

Linear, radial and conic gradients with presets.

Code Minifier

Minify HTML, CSS and JS.

Clip Path Maker

CSS shapes with draggable vertices.

Embed CSS Loader Generator on your site

Add CSS Loader Generator to any web page with a simple iframe. Free, with attribution to miguelacm.es.

<iframe
  src="https://miguelacm.es/embed/css-loader-generator"
  width="100%"
  height="700"
  frameborder="0"
  title="CSS Loader Generator — miguelacm.es"
></iframe>
View embed in new tab →
View source on GitHub