Loading spinner — pure CSS animation
A spinning circle that shows 'loading in progress'. No JavaScript, no images — pure CSS.
style.css
v3.1
style.css — the CSS rules
index.html — the HTML structure (what the CSS targets)
Live preview
updates as you type
🧠 How it works
The spinner is a circle (border-radius: 50%) with a colored top border. animation: spin 0.8s linear infinite — rotates 360 degrees every 0.8 seconds, forever. @keyframes spin defines the animation: 'to { transform: rotate(360deg) }' means 'end at 360 degrees'. linear — constant speed (ease would speed up/slow down, which looks wrong for a spinner). The skeleton loader uses a moving gradient — gives the illusion of content loading. background-size: 200% 100% — gradient is 2x the element width, so it can slide. background-position animates from 200% to -200% — the gradient slides left, creating a 'shimmer'.
✏️ Try these changes
-
Change the spinner border-top-color to #f85149→ spinner becomes red -
Change animation duration from 0.8s to 2s→ spinner rotates much slower -
Change linear to ease-in-out→ spinner speeds up and slows down (feels organic) -
Change the spinner width/height from 40px to 60px→ bigger spinner -
Change the skeleton animation from 1.5s to 0.5s→ shimmer moves faster