Summarize this article with:
This collection of CSS spinners examples covers everything from simple border spinners to gradient loaders and pulsing dots.
You’ll learn how each spinner type works, when to use them, and how to customize colors, sizes, and animation speeds for your projects.
Copy the code, drop it into your site, done.
What is a CSS Spinner
A CSS spinner is a loading indicator built entirely with Cascading Style Sheets.
It displays visual feedback while content loads or processes in the background.
These animated loaders use transform properties, CSS keyframes, and border-radius to create rotating or pulsing effects.
No JavaScript required.
You’ll find CSS spinners on landing pages, form submissions, Ajax requests, and anywhere async content loading happens.
They’re lightweight, customizable, and work across all modern browsers including Chrome, Firefox, Safari, and Microsoft Edge.
CSS Spinners Examples To Check Out
Spinner Loader: A Whirl of Colors
See the Pen
Spinner loader by João Santos (@jotavejv)
on CodePen.
2 Shapes Spinner: An Attention Grabber
3D Preloader: Speedy Load Times
Loading Text: Orbiting a Sphere
Loading Things Spinner: A Smooth Ride
Alternating CSS Spinner: The Satisfaction Maximizer
Olympic Spinner: Sporty Vibes
Fidget Spinner Loading: The Retro Revival
For those who miss the fidget spinner frenzy. Spin it, Tomi Sjöblom style, with a touch of CSS magic.
Triangle Spinner Animation: Sleek and Simple
CSS Loading Animation 12: A Stylish Statement
Beaulti Circle: The Lone Spinner
Spinning Loading Animation: Radar On The Go
Squares Spinner: Pure Minimalism
Jellyfish Spinner: Oh, What’s This?
Clock Arrow Spinner: Time’s A-Ticking
Out Of Sync Line: The Dance of Lines
Weird Spinner: Like, Really Weird
Simple Repeating Spinner: Hugo’s Masterpiece
Rainbow Spinner: Splash of Colors
Animated Spin Quartet
Font Icon Spinners: The Modern Touch
Massimo’s Magic: Spinner Delight
Hexagonal Moves: Six-Sided Show
Optical Spin: Watch It, Don’t Blink!
Super Simple Spinner: The Basic Beauty
Auth0 Spinner: Shopper’s Delight
Single Div Wonder: Spinning Round and Round
Snowball Spin: Winter Wonderland Magic
Eclipse Spinner: Minimal Magic
Greensock 3D: The Showstopper
Solarsystem Loader: Cosmic Creations
Tron Spinner: The Samurai’s Touch
Digital Spinner: Electrifying Elegance
Optical Spinner: A Visual Trip
Android Vibes: A Nostalgic Spin
8 Bit Spinner: Pixel Paradise
Twinner Spinner: Double Trouble
Polygon Power: Shape Shifters
Loading Spin Showcase
Zippo Configurator: SVG + CSS Fusion
Anya’s Art: Spin and Win
How CSS Spinners Work
CSS spinners rely on keyframe animations to create continuous motion.
The @keyframes rule defines the animation sequence from start to finish.
A typical spinner rotates an element 360 degrees using transform: rotate().
The animation property ties everything together:
- animation-name references the keyframe
- animation-duration controls speed (usually 0.6s to 1.2s)
- animation-timing-function sets the easing (linear for smooth rotation)
- animation-iteration-count uses infinite for continuous loops
The browser’s rendering engine handles the infinite loop animation.
GPU acceleration kicks in for transform and opacity changes, keeping performance smooth.
This is why pure CSS loaders often outperform JavaScript alternatives.
Types of CSS Spinners
CSS spinners fall into distinct categories based on their visual pattern and animation technique.
Each type suits different user interface contexts and brand aesthetics.
The main types include border spinners, dots spinners, bar spinners, pulse spinners, and gradient spinners.
Selection criteria: animation complexity, file size, browser support, and customization flexibility.
Border Spinners
The most common spinner type. Uses a partial border with border-radius: 50% to create a circular loader.
One border side gets a different color (usually transparent), creating the spinning arc effect.
Lightweight, works everywhere, easy to customize size and color.
Dots Spinners
Multiple circular elements animating in sequence.
Common patterns: bouncing dots, scaling dots, fading dots, orbiting dots.
Uses animation-delay to offset each dot’s timing, creating wave-like motion. Popular for modern, friendly interfaces.
Bar Spinners
Rectangular elements that scale, fade, or rotate in sequence.
Think classic loading bars arranged in a circle like clock hands. Works well for minimalist design systems.
Pulse Spinners
Single or multiple elements that scale up and fade out repeatedly.
Creates a radar-like or ripple effect. Subtle, non-intrusive, great for inline loading states and button spinners.
Gradient Spinners
Uses conic-gradient or linear-gradient with rotation animation.
Creates smooth color transitions around the spinner. More visually complex but adds a premium feel to the user experience.
How to Create a CSS Spinner
Building a basic border spinner takes three steps.
Step 1: Create the HTML element.
“ <div class="spinner"></div> `
Step 2: Style the spinner shape.
` .spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; } `
Step 3: Add the rotation animation.
` .spinner { animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `
That’s your basic CSS loading spinner. No dependencies, no JavaScript, works on any webpage.
How to Customize CSS Spinner Size
Adjust width and height properties together to maintain the circular shape.
Scale the border-width proportionally. A 40px spinner works with 4px borders; an 80px spinner needs 6-8px borders.
For responsive design, use relative units:
- em/rem for scalable spinners relative to font size
- vw/vh for viewport-based sizing
- % when the spinner needs to fill its container
Common sizes: 16-24px for inline/button spinners, 40-60px for content areas, 80-120px for fullscreen loaders.
How to Customize CSS Spinner Color
Border spinners use border-color for the track and border-top-color (or any side) for the spinning arc.
Match your brand colors or use color contrast that stands out against the background.
For dots and bar spinners, target individual elements with nth-child selectors to create multi-color sequences.
Gradient spinners offer the most color flexibility:
` .gradient-spinner { background: conic-gradient(#3498db, #9b59b6, #3498db); border-radius: 50%; mask: radial-gradient(farthest-side, transparent 60%, #000 61%); } `
CSS custom properties make color changes easy across your entire site:
` .spinner { border-top-color: var(--spinner-color, #3498db); } `
How to Customize CSS Spinner Speed
The animation-duration property controls rotation speed.
Typical values: 0.6s feels urgent, 1s feels balanced, 1.5s+ feels relaxed.
Animation timing functions change the feel dramatically:
- linear creates constant, mechanical rotation
- ease-in-out adds subtle acceleration and deceleration
- cubic-bezier() for custom easing curves
Match spinner speed to perceived wait time. Fast spinners for quick operations, slower for longer processes.
You can also use the CSS Animation Generator to experiment with different timing values.
How to Center a CSS Spinner
Centering depends on the spinner’s context: inline, container, or fullscreen.
Flexbox method (most common):
` .spinner-container { display: flex; justify-content: center; align-items: center; } `
Absolute positioning for overlay spinners:
` .spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } `
Grid method (cleanest):
` .spinner-container { display: grid; place-items: center; } `
For fullscreen loaders, combine fixed positioning with the viewport dimensions and a semi-transparent loading overlay.
CSS Spinner Performance Considerations
Not all CSS properties animate equally. Transform and opacity trigger GPU acceleration, keeping animations at 60fps.
Avoid animating width, height, margin, or padding. These cause layout recalculations and hurt page load performance.
Best practices:
- Use transform: rotate() instead of rotating via other methods
- Add will-change: transform for complex spinners
- Keep DOM elements minimal (one div beats nested structures)
- Test on low-powered mobile devices
Chrome DevTools Performance panel reveals paint operations and composite layers.
A lightweight loader should show zero layout shifts during animation.
CSS Spinner Browser Support
CSS animations and transforms work in all modern browsers without prefixes.
Full support: Chrome 43+, Firefox 16+, Safari 9+, Edge 12+, Opera 30+.
Legacy browsers (IE10-11) need -webkit- and -ms- prefixes for animations.
Check cross-browser compatibility data on Can I Use before deploying.
Conic-gradient spinners have narrower support. Safari added it in version 12.1, so provide fallbacks for older WebKit browsers.
The mask property (used in some gradient techniques) still needs -webkit-mask for Safari.
When to Use CSS Spinners
CSS spinners signal that something is happening. They reduce perceived load time and prevent users from clicking repeatedly.
Common use cases:
- Form submission buttons (inline spinner replaces button text)
- Data fetch operations from an API
- Image and content lazy loading
- Bootstrap modal content loading
- Page transitions in single-page applications
- Progressive web app initial loads
Pair spinners with skeleton screens for longer waits. Skeletons show content structure while spinners indicate active processing.
Keep spinner duration under 10 seconds. Longer waits need progress indicators or status messages instead.
For more loading animation options, explore CSS loaders and CSS progress bar examples.
FAQ on CSS Spinners Examples
What is a CSS spinner?
A CSS spinner is a loading indicator created with CSS properties and keyframe animations. It provides visual feedback during content loading, form submissions, or API requests without requiring JavaScript or external libraries.
How do I create a simple CSS spinner?
Create a div element, apply border-radius: 50% for a circle, add a partial colored border, then use @keyframes with transform: rotate(360deg) and animation: spin 1s linear infinite to create the rotation effect.
Why is my CSS spinner not spinning?
Common causes: missing @keyframes definition, incorrect animation-name reference, animation-iteration-count not set to infinite, or the element has display: none. Check Chrome DevTools for CSS errors and verify all animation properties are applied.
How do I center a CSS spinner on a page?
Use flexbox with display: flex, justify-content: center, and align-items: center on the container. For fullscreen loaders, combine position: fixed with top: 50% and left: 50%, then add transform: translate(-50%, -50%).
Can I use CSS spinners without JavaScript?
Yes. Pure CSS spinners work entirely with CSS animations and require no JavaScript. They’re lightweight, performant, and supported in all modern browsers including Chrome, Firefox, Safari, and Edge.
How do I change CSS spinner color?
For border spinners, modify border-color for the track and border-top-color for the spinning arc. Use CSS custom properties like var(–spinner-color) for easy theme switching across your entire stylesheet.
How do I make a CSS spinner smaller or larger?
Adjust width and height properties together to maintain the circle shape. Scale border-width proportionally. Use rem or em units for responsive typography scaling, or viewport units for adaptive sizing.
What is the best CSS spinner for buttons?
Small border spinners (16-20px) work best for Bootstrap button loading states. Keep them inline, match the button text color, and replace the button label during loading to indicate processing.
How do I add a CSS spinner to a loading overlay?
Create a fixed-position container covering the full viewport with a semi-transparent background. Center the spinner inside using flexbox or grid. Add z-index to ensure the loading overlay appears above page content.
Are CSS spinners accessible?
Add aria-label=”Loading” and role=”status” to spinners for screen reader support. Include visually hidden text describing the loading state. Follow web accessibility guidelines by ensuring sufficient ARIA attributes are present.
Conclusion
These CSS spinners examples give you ready-to-use loading animations for any project. Border spinners, dots, pulses, gradients. Pick one, customize it, ship it.
The best part? Zero external dependencies. Your spinner component runs on pure CSS3 animations with full browser support across Chrome, Firefox, Safari, and Edge.
Performance stays smooth when you stick to transform and opacity properties. GPU acceleration handles the heavy lifting.
Match your spinner to the context. Small inline spinners for Bootstrap form submissions. Larger animated loaders for fullscreen page transitions. Subtle pulse effects for micro-interactions.
Don’t forget accessible forms practices. Add ARIA labels so screen readers announce the loading state.
Now build something that keeps users engaged while they wait.
