Responsive CSS Loading Spinner Animation

/* Responsive CSS Loading Spinner Animation
   Usage: add class="loader" (or .c-loader) to any element; customize via CSS variables. */

:root {
  /* Theming tokens (override per component/theme) */
  --loader-size: 50px;
  --loader-thickness: 8px;
  --loader-track: rgba(0, 0, 0, 0.1);
  --loader-accent: #4a90e2;
  --loader-speed: 1s;
}

/* BEM-friendly component class; keep selector simple for performance */
.c-loader,
.loader {
  /* Fallbacks for older browsers that don't support CSS variables */
  width: 50px;
  height: 50px;
  border: 8px solid rgba(0, 0, 0, 0.1);
  border-left-color: #4a90e2;

  /* Modern theming via custom properties */
  width: var(--loader-size, 50px);
  height: var(--loader-size, 50px);
  border: var(--loader-thickness, 8px) solid var(--loader-track, rgba(0, 0, 0, 0.1));
  border-left-color: var(--loader-accent, #4a90e2);

  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: c-loader-spin var(--loader-speed, 1s) linear infinite;
  will-change: transform; /* Performance hint: only transform animates */
}

/* Centering helper (optional wrapper) using flexbox */
.c-loader-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Animate only transform for best performance */
@keyframes c-loader-spin {
  to { transform: rotate(360deg); }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .c-loader,
  .loader {
    animation-duration: 2.5s; /* Slower rather than none to still indicate activity */
  }
}

/* Responsive Styles */
@media (max-width: 600px) {
  .c-loader,
  .loader {
    width: 35px;
    height: 35px;
    width: var(--loader-size-sm, 35px);
    height: var(--loader-size-sm, 35px);
  }
}

/* Example usage:
<div class="c-loader-wrap" aria-busy="true" aria-live="polite">
  <span class="c-loader" role="status" aria-label="Loading"></span>
</div>
To theme per instance:
.c-loader { --loader-accent: #22c55e; --loader-size: 56px; --loader-speed: .85s; }
*/