How to create a loading spinner with pure CSS?

The CSS properties that make a spinner spin are animation (with @keyframes rotating transform: rotate()) and border (with asymmetric coloring); animation-timing-function: linear ensures smooth motion, and animation-iteration-count: infinite enables continuous rotation.

What CSS properties actually make a spinner spin

A spinner isn’t just a circle — it’s an element that rotates continuously using animation and transform: rotate(). The key is combining @keyframes that go from 0deg to 360deg, applied to an inline or block-level element with a defined size and border (or pseudo-elements). Without animation-timing-function: linear, the motion feels jerky; without animation-iteration-count: infinite, it stops after one cycle.

Do this:

• Use border with transparent sides to form a “C” shape — most lightweight spinners rely on this trick
• Set border-radius: 50% on the element to keep proportions round
• Always include animation-duration (e.g., 0.8s) — too fast feels frantic, too slow feels stuck
• Avoid width/height alone — use aspect-ratio: 1 or explicit same-value dimensions for consistency

How to build a minimal spinner with ::after

You don’t need extra HTML markup. A single element like a <div class="spinner"></div> can host the spinner via its ::after pseudo-element — keeps DOM clean and avoids wrapper bloat.

Example CSS:

.spinner {
  position: relative;
  width: 24px;
  height: 24px;
}
.spinner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #ccc;
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 0.8s ease-in-out infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

Why this works: border-top-color overrides only the top edge, creating visual asymmetry needed for rotation perception. ease-in-out softens start/stop — but if you want perfectly uniform speed, switch to linear.

Why transform: rotate() beats animation: rotation

There’s no rotation CSS property. People sometimes mistakenly try animation: rotation 1s infinite — that fails because rotation isn’t a valid property. The correct path is always transform: rotate() inside @keyframes.

Common pitfalls:

• Forgetting transform-origin: center — causes wobble if the element isn’t perfectly square or has padding
• Using rotateX() or rotateY() — those create 3D tilts, not flat spinning
• Applying animation to a parent with overflow: hidden but no border-radius — clipped corners break the illusion of smoothness

When to avoid pure-CSS spinners entirely

CSS spinners are great for simple states, but they’re inert — no programmatic control over start/stop without toggling classes. If your app needs to coordinate loading with API calls, error fallbacks, or timeout handling, you’ll still need JS to add/remove a loading class.

Also watch for:

• Accessibility: Screen readers ignore decorative spinners. Always pair with aria-busy="true" and aria-live="polite" on the relevant container
• Performance: Animating transform is GPU-accelerated, but animating border-color or box-shadow alongside it can trigger layout thrashing
• Dark mode: Hardcoded colors like #ccc may vanish on dark backgrounds — prefer currentcolor or CSS custom properties

The subtle part isn’t making it spin — it’s making sure it spins *only when needed*, stays accessible, and doesn’t fight your layout or theme.

The above is the detailed content of How to create a loading spinner with pure CSS?. For more information, please follow other related articles on the PHP Chinese website!