Loading Spinner Generator

Design custom pure CSS loading animations, spinners, ring indicators, and dot pulse sequences.

Spinner Type

Diameter Size48px

Border Thickness4px

Rotation Easing Time1s

Spinner Color

Track Color

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

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

What is a Loading Spinner in CSS?

CSS loading spinners are pure CSS animated graphics that indicate pages or actions are processing.

Why Use a CSS Loading Spinner?

Using pure CSS spinners is fast, lightweight, and requires no external heavy GIF files, improving site speed and Core Web Vitals.

CSS Syntax & Controls

Spinners use round border containers with a single colored edge, rotated infinitely using @keyframes spin animations.

border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 2s linear infinite;

Best Practices

Keep spinner animation times comfortable (0.8s to 1.5s per rotation).
Include aria-live and screen reader text for accessibility.

Common Mistakes

Animating spinners at high speeds, which can cause visual discomfort.

Step-by-Step Guide: How to Use this Generator

Select standard, dual-arc, or dashed spinner styles.
Customize colors, diameter size, and border weight.
Adjust speed timers, copy the HTML/CSS and animation keyframes.

Browser Compatibility

Chrome	Safari	Firefox	Edge
Yes (Full)	Yes (Full)	Yes (Full)	Yes (Full)

Frequently Asked Questions (FAQ)

How do I make my spinner accessible?

Wrap it in a container with role='status' and include visually hidden text like 'Loading...'.