CSS Spinner Generator

About this tool

Loading spinners tell users the interface is working, not frozen — a critical feedback mechanism for API calls, form submissions, and file processing. Pure CSS spinners need no GIF or SVG asset: a styled element animates indefinitely via @keyframes. The CSS Spinner Generator offers five presets — Border, Dual Ring, Dots, Pulse and Bars — and three controls: Size (16–140px), one Color, and Speed in seconds (0.2–4). Ring thickness is derived from the size, and the Border preset draws its track in the same color at low opacity (the hex color with 33 appended as alpha). The live preview updates as you change values, and the output includes the .spinner rule plus its @keyframes sp-rot block, ready to paste. The Dots preset expects one <i> element inside the spinner for its middle dot.

Why use it

• Pure CSS: No JavaScript, no animated GIF, no SVG file dependency. Most presets are a single div with a border or background and an animation; the Dots preset adds one <i> child. Nothing extra is downloaded.

• Speed Control: The Speed field sets the duration of one cycle in seconds, from 0.2 to 4. Fast spinners (0.6–0.8s) convey urgency for quick operations; slower spinners (1.2–1.6s) feel more relaxed for longer background tasks.

• Auto Thickness: Ring thickness follows the size — about one ninth of the diameter for Border and one tenth for Dual Ring, never below 2px — so small inline spinners stay light and large overlay spinners stay visible.

• One Color: A single color picker drives every preset. The Border preset reuses it for the track at low opacity by appending 33 to the hex value, so the arc and track always match.

• Five Presets: Border is the classic rotating arc; Dual Ring colors the top and bottom arcs of one rotating ring; Dots scales three dots in sequence; Pulse grows and fades a filled circle; Bars animates three gradient bars. All share the same size, color and speed controls.

• Copy + Keyframes: The output includes both the .spinner rule and its @keyframes sp-rot block. Forgetting the keyframes is the most common reason a spinner does not animate after pasting — this generator outputs both together so nothing is missing.

How to use

1. Pick a preset: Border, Dual Ring, Dots, Pulse, or Bars
2. Drag the Size slider (16–140px); ring thickness scales with it automatically
3. Choose one Color — the Border preset uses it for the moving arc and a faint low-opacity track
4. Set Speed in seconds (0.2–4) for one animation cycle
5. Preview the live spinning animation to verify the look and feel
6. Click Copy CSS to capture the .spinner rule plus its @keyframes sp-rot block

When it helps

• When a button needs an inline spinner to replace its label during a form submission or async operation
• When a card or section is loading data and needs a centered placeholder spinner
• When building a full-page loading overlay for an initial data fetch on a dashboard
• When an image or content area is lazy-loading and needs a lightweight placeholder animation
• When replacing an animated GIF spinner that no longer matches the updated color scheme
• When building a design system and need a standardized, tokenized loading indicator component

Examples

Preset: Border, Size: 40px, Color: #6366f1, Speed: 0.8s

.spinner {
  width:40px;
  height:40px;
  border:4px solid #6366f133;
  border-top-color:#6366f1;
  border-radius:50%;
  animation:sp-rot 0.8s linear infinite
}

@keyframes sp-rot{to{transform:rotate(1turn)}}

Preset: Border, Size: 56px, Color: #f5c842, Speed: 1s

.spinner {
  width:56px;
  height:56px;
  border:6px solid #f5c84233;
  border-top-color:#f5c842;
  border-radius:50%;
  animation:sp-rot 1s linear infinite
}

@keyframes sp-rot{to{transform:rotate(1turn)}}

Preset: Dual Ring, Size: 64px, Color: #4b5563, Speed: 1.4s

.spinner {
  width:64px;
  height:64px;
  border:6px solid transparent;
  border-top-color:#4b5563;
  border-bottom-color:#4b5563;
  border-radius:50%;
  animation:sp-rot 1.4s linear infinite
}

@keyframes sp-rot{to{transform:rotate(1turn)}}

Tips

• Always use linear easing — ease or ease-in-out creates an uneven rotation that looks broken on circular spinners
• Define @keyframes spin globally once and reference it in multiple spinner classes rather than redefining the keyframes per component
• Respect @media (prefers-reduced-motion: reduce) by stopping the animation — users with vestibular disorders can experience discomfort from rotating elements
• Colored arc effect comes from border-top (or one side) having a different color than the remaining three borders — not from a gradient
• Add will-change: transform to the spinner element for consistent GPU-accelerated rendering on pages with many simultaneously animated elements

Frequently Asked Questions

Glossary

Keyframes

CSS @keyframes rules that define the intermediate steps of an animation by specifying property values at percentage points (0%, 50%, 100%) or from/to keywords along the animation timeline.

Animation Duration

The time it takes to complete one full cycle of a CSS animation, set with animation-duration in seconds or milliseconds. For spinners, this is the time for one full 360-degree rotation.

Linear Easing

An animation timing function that progresses at a constant rate from start to finish with no acceleration or deceleration, essential for smooth continuous rotation effects.

Border Radius

When set to 50%, turns a square element into a circle. Applied to a spinner div to create the circular ring shape that the border-based animation technique requires.

Infinite Loop

Animation-iteration-count: infinite keeps a CSS animation running continuously without stopping. Spinners rely on this to maintain rotation for the entire duration of a loading state.

Loader

A UI element that indicates background processing or data fetching to prevent users from thinking the application has frozen. CSS spinners are the most lightweight implementation of this pattern.