FreeDev Tools

CSS Loader Generator

Generate pure-CSS loading spinners — ring, dots, bars, and pulse — no images or JS.

.loader span {
  display: block;
  width: 48px;
  height: 48px;
  border: 5px solid #3b82f633;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: ldr-spin 1000ms linear infinite;
}
.loader span:nth-child(n+2) { display: none; }

@keyframes ldr-spin {
  to { transform: rotate(360deg); }
}

Generated locally in your browser — nothing is uploaded.

How to Use

  1. 1

    Pick a style

    Ring, dots, bars, or pulse.

  2. 2

    Tune size, color, speed

    The preview animates live.

  3. 3

    Copy CSS + markup note

    Pair with a .loader div containing three spans.

Frequently Asked Questions

Four classics: a spinning ring, three bouncing dots, animated bars, and an expanding pulse — all pure CSS keyframe animations, no images, GIFs, or JavaScript.

Related Tools

CSS Gradient GeneratorBuild linear and radial CSS gradients visuallyBox Shadow GeneratorCreate CSS box shadows with a live previewBorder Radius GeneratorGenerate CSS border-radius values visuallyFlexbox GeneratorBuild CSS flexbox layouts with a visual editorCSS Grid GeneratorBuild CSS grid layouts with a visual editorText Shadow GeneratorGenerate CSS text-shadow effects with live previewCSS Animation GeneratorCreate CSS keyframe animations with a live editorClip-Path GeneratorGenerate CSS clip-path polygon shapes visually