UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

CSS Spinner Generator

Browse spinner presets, tweak size speed and color, and copy animation-ready CSS.

About CSS Spinner Generator

Loading spinners tell users the interface is working, not frozen — a critical feedback mechanism for API calls, form submissions, and file processing. While animated GIF and SVG spinners require external assets and limited customization, pure CSS spinners use a circular border with one colored arc that rotates indefinitely via @keyframes. The CSS Spinner Generator lets you set size, border thickness, track color, accent color, and animation speed to match your exact component — whether that is a 16px inline button spinner, a 40px card placeholder, or a full-page loading overlay. Choose from ring, dual-ring, and dot variants. The output includes both the spinner class and the required @keyframes spin block, ready to paste and run.

Why use CSS Spinner Generator

Pure CSS

No JavaScript, no animated GIF, no SVG file dependency. The spinner is a single div with a border and an animation, requiring zero additional HTTP requests. It renders identically across all modern browsers and scales cleanly to any size.

Speed Control

The animation duration slider lets you set the exact rotation period in seconds. Fast spinners (0.6–0.8s) convey urgency for quick operations; slower spinners (1.2–1.6s) feel more relaxed for longer background tasks. Most spinners default to 1s linear.

Thickness Slider

Border width controls the visual weight of the spinner ring. Thin borders (2px) work inside inline buttons without dominating the surrounding text; thicker borders (6–8px) are more visible at larger sizes and in loading overlay contexts.

Color Match

Separate pickers for track and accent let you precisely match your design system. A white accent on a transparent track works inside dark buttons; an indigo accent on a light-gray track matches most light-mode dashboards. Both colors are tokenizable.

Multiple Styles

The ring spinner is the classic loading indicator. The dual-ring adds a second counter-rotating arc for more visual interest. The dot style uses multiple scale-animated circles for a pulsing loader. All three share the same size and speed controls.

Copy + Keyframes

The output includes both the .spinner rule and the @keyframes spin 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 CSS Spinner Generator

  1. Choose a spinner style: single ring, dual-ring, or dots from the style selector
  2. Set the spinner diameter and border thickness with the size sliders
  3. Pick a track color (the full circle base) and an accent color (the moving arc)
  4. Drag the speed slider to set the rotation duration in seconds
  5. Preview the live spinning animation to verify the look and feel
  6. Click Copy CSS to capture the spinner class plus the @keyframes spin declaration

When to use CSS Spinner Generator

  • 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

Indigo ring spinner

Input: Size: 40px, thickness: 4px, track: #f3f4f6, accent: #6366f1, speed: 0.8s

Output: .spinner { border: 4px solid #f3f4f6; border-top-color: #6366f1; border-radius: 50%; width: 40px; height: 40px; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }

Slow gray loader

Input: Size: 64px, thickness: 6px, track: #e5e7eb, accent: #4b5563, speed: 1.4s

Output: .spinner { border: 6px solid #e5e7eb; border-top-color: #4b5563; border-radius: 50%; width: 64px; height: 64px; animation: spin 1.4s linear infinite; }

Inline button spinner

Input: Size: 16px, thickness: 2px, track: rgba(255,255,255,0.3), accent: #ffffff, speed: 0.6s

Output: .spinner { border: 2px solid rgba(255,255,255,0.3); border-top-color: #ffffff; border-radius: 50%; width: 16px; height: 16px; animation: spin 0.6s linear infinite; }

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

How does a CSS-only spinner work without JavaScript?▾
A spinner is a circular div with a complete border in a track color and one side (typically border-top) in the accent color. The @keyframes spin animation rotates the element 360 degrees continuously using transform: rotate(). No JavaScript is needed since the animation is entirely CSS-driven.
What is the best animation duration for a loading spinner?▾
0.8–1.2 seconds per rotation is the conventional range for spinners. Faster than 0.6s starts to look frantic and may be hard to follow visually. Slower than 1.5s can feel sluggish. Use faster speeds for perceived quick operations and slower speeds for genuinely long processes.
Should I use linear or ease-in-out for spinners?▾
Always linear. ease-in-out creates a perceptible acceleration and deceleration that looks mechanical and uneven on a rotating circle. Linear timing produces a smooth, constant rotation that reads naturally as a spinning object.
How do I make a spinner respect prefers-reduced-motion?▾
Wrap the animation declaration in a @media (prefers-reduced-motion: no-preference) block, or replace the animation with a static indicator inside @media (prefers-reduced-motion: reduce). This stops the rotation for users who have requested reduced motion in their OS settings.
Can I add multiple colors to a spinner?▾
A single border-based spinner supports two colors: the track and the accent arc. For multi-color spinners, use SVG with stroke-dasharray and multiple animated circle elements, or use conic-gradient on a rotating element for a rainbow arc effect.
Why does my spinner stutter or jitter?▾
Stuttering usually means the animation is running on the main thread. Add will-change: transform to the spinner element to promote it to its own compositor layer and enable GPU-accelerated rendering. Also ensure no synchronous JavaScript is blocking the main thread during the animation.
How is animation different from transition?▾
Transitions animate between two states triggered by a state change (hover, class toggle). Animations run autonomously on a defined timeline without needing a trigger, support multiple keyframes, and can loop, reverse, or delay independently.
Can the spinner be paused on hover?▾
Yes. Add animation-play-state: paused to the :hover state to freeze the rotation when the cursor moves over the spinner. This is occasionally used to display a cancel action on hover, though pausing a loading spinner is uncommon in typical UI patterns.

Explore the category

CSS Filter Playground Stack blur, color, and tonal CSS filters with sliders and copy-ready filter declarations. CSS Gradient Generator Create linear or radial gradients with stops, angles, and copy-ready background snippets. Scrollbar Styler Tint scrollbar thumbs and tracks for WebKit and Firefox using copy-ready pseudo-element CSS. CSS Keyframes Generator Compose starter animations with timing controls and copy @keyframes blocks. CSS Unit Converter Convert between CSS units — px, em, rem, vh, vw, pt, pc, cm, mm, in — with configurable base font size and viewport dimensions. CSS Box Model Visualizer Visualize the CSS box model interactively — adjust margin, border, padding, and content size to understand element dimensions.
Web Fonts: Performance, Loading Strategies, and FOUT Explained Web fonts are one of the most common sources of layout shift and invisible text flash. The font-display property and a few preload hints can May 2026 · 9 min CSS Specificity: The Complete Guide to the Cascade and Inheritance CSS specificity is the invisible rule that decides which style wins when two selectors target the same element. Understanding it lets you de Apr 2026 · 9 min Flexbox vs Grid: When to Use Which CSS Layout System Flexbox and Grid are not competing technologies — they solve different layout problems. Knowing which to reach for makes your CSS cleaner an Apr 2026 · 9 min

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.