animation

CSS Loading Spinner

Pure CSS animated loading spinners — border spin, dots, and pulse variants with no JavaScript.

Loading spinners are essential UI patterns for async operations. This snippet provides three pure CSS approaches: a classic border-based spin, a dotted bounce animation, and a pulsing circle — all built with @keyframes and no JavaScript required.

Live CSS Editor

CSS

Preview

Edit CSS → see live previewTab = 2 spaces

Usage Note

For accessibility, add role="status" and an aria-label to the spinner container so screen readers announce the loading state. Add prefers-reduced-motion overrides for motion-sensitive users.