@keyframes spin { to { transform: rotate(360deg); } } .loader-spinner { width: 40px; height: 40px; border: 5px solid #6366f140; border-top-color: #6366f1; border-radius: 50%; animation: spin 800ms linear infinite; }

CSS-only loading animations

CSS loaders animate without JavaScript using @keyframes animations on basic HTML elements. They are lightweight, smooth, and GPU-accelerated when animating transform and opacity.

Common loader types

Spinner: a rotating ring made with a bordered div with one transparent side and animation: spin 1s linear infinite.
Dots: three or more circles that pulse in sequence using animation-delay to stagger the timing.
Skeleton loader: a shimmer effect over placeholder shapes that mimics the layout of loading content. Better UX than spinners for content-heavy pages.
Progress bar: a bar that fills horizontally, useful for page load or file upload progress.

Accessibility

Always add role="status" and an aria-label like "Loading…" to your loader container. Users who rely on screen readers should be informed that content is loading. Use prefers-reduced-motion to disable or reduce animations for users who have requested it.

prefers-reduced-motion code example

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
    /* Optionally show a static indicator instead */
  }
}

This CSS media query respects the OS-level accessibility preference. Users with vestibular disorders or motion sensitivity can enable this setting, and your loaders should gracefully degrade to a static or minimal-motion state.

Loading state UX patterns

Spinner: Use for unpredictable wait times under ~5 seconds. Works well for form submissions, API calls, button actions. Does not communicate progress.
Progress bar: Use when you can measure progress (file uploads, multi-step forms, long computations). Shows % complete; reduces perceived wait time.
Skeleton loader: Shows placeholder shapes mimicking the layout of the content being loaded (cards, text lines). Best for content-heavy pages (dashboards, social feeds) - reduces perceived wait time by 30% in studies vs. spinners.
Optimistic UI: Show the result immediately and revert if the action fails (e.g., like button turns red instantly). No loader at all. Best for high-confidence actions with fast networks.