CSS Animation Example: Infinite Spinner

The "Infinite Spinner" is the classic UI pattern for indicating that a background process (like data fetching) is currently underway.

This animation is built by creating a circular element using border-radius: 50%, and giving one of its borders a distinct color (e.g., using border-top-color). We then continuously spin the element using @keyframes and transform: rotate().

Here is the code to create the Infinite Spinner animation.

View Output

Accessibility Considerations

Loading indicators are a unique case. We want to respect the user's system preferences using the prefers-reduced-motion media query. However, completely freezing a loading spinner might make the user think the application has crashed or frozen entirely.

A good compromise is to significantly slow down the animation so it still communicates state without being visually disruptive.


@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation-duration: 4s; /* Slows the spin down to a crawl */
    }
}