All tools

CSS Loader / Spinner

Pure CSS loaders in 5 styles.

CSS
.spinner {
  width: 48px;
  height: 48px;
  border: 6px solid #e5e5e5;
  border-top-color: #0066ff;
  border-radius: 50%;
  animation: spinner 1s linear infinite;
}
@keyframes spinner {
  to { transform: rotate(360deg); }
}
HTML
<div class="spinner"></div>

Pure CSS loaders. No images, no JavaScript - just keyframes. Drop the CSS into your stylesheet and the HTML into your page. Smaller bundle than spinners shipped as SVG or PNG.

About

Pick a style (spinner, ring, bars, dots, pulse), set size, color, and speed. The tool generates working CSS plus the matching HTML. No images, no JS - just keyframes.

How to use

  1. Pick a style.
  2. Tweak size, color, speed.

FAQ

Why pure CSS?+

No image to load, no JS to run - it works the moment the HTML parses. Smaller bundle, faster first paint, no flash of empty space.