← Home
中文

CSS Loaders

18+ pure CSS spinners · color/size customizable · copy code

About these loaders

  • All animations are pure CSS (no JS, no images), so they work in any framework
  • CSS variables --c and --s control color and size for easy theming
  • Animations rely on GPU-accelerated properties (transform/opacity) for smooth perf
  • For long loads, wrap with a skeleton placeholder to reduce visual jank

Accessibility

  • Add role="status" and aria-label="Loading" for screen readers
  • Respect @media (prefers-reduced-motion) — show a static state instead
  • If load takes >30s, prefer a progress bar or skeleton over a spinner