Limits: Size: 16–120px · Speed: 0.2–3s

CSS Loader Generator

Generate CSS-only loading spinners and animations. Pick a style, customize, and copy the code.

Loader Style

Size: 48px

Color

Speed: 1s

CSS Code

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #e5e7eb;
  border-top: 5px solid #2563eb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

HTML

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

Full Snippet

About CSS Loader Generator

CSS Loader Generator creates pure CSS loading spinners and animations with no JavaScript or image files required. Choose from 8+ preset styles — ring spinners, dots, bars, pulse animations, and more — then customize the size, color, and animation speed.

CSS-only loaders are lightweight, accessible, and work everywhere without JavaScript. They're perfect for adding loading states to buttons, forms, or full-page overlays.

Copy the complete HTML and CSS needed to use the loader anywhere on your site.

Features

✓8+ preset spinner and animation styles
✓Configurable size, color, and animation speed
✓Pure CSS — no JavaScript required
✓Live preview
✓Copy HTML + CSS snippet

Common Use Cases

→Adding loading states to form submit buttons
→Creating full-page loading overlays
→Building skeleton loading animations
→Adding progress indicators to async operations