Loading

CSS-only spinner and skeleton primitives using the existing color, radius and easing tokens. References: Material loading indicator and shadcn Spinner. This is a simple circular spinner, not a reproduction of Material's shape-morph animation.

import '@k4k3ru/design-system-loading/style.css';

<div class="loading" role="status">
  <span class="loading__spinner" aria-hidden="true"></span>
  <span class="loading__label">Loading…</span>
</div>
<div class="loading" role="status">
  <span class="loading__label">Loading content…</span>
  <span class="loading__skeleton" aria-hidden="true"></span>
</div>

No IDs, selectors or JS initialization are required. The application owns request lifecycle, hidden, aria-busy on the region being updated, and the display duration. Use one accessible status label per loading region and hide decorative shapes from assistive technology. Omit loading__label on text that should be visibly displayed.

Set --loading-color, --loading-surface, --loading-radius, --loading-duration, --loading-spinner-size, --loading-skeleton-width, --loading-skeleton-height on the loading element or individual shapes. Layout/shape sizes belong to the consuming page. Reduced motion disables animation; forced colors use system colors.

Build with npm run build (or root npm run build:loading). Serve the repository and visit web/components/loading/example/ for the static spinner/skeleton example.

Smaller size

Use loading--smaller on the component root. Spinner: 1.25rem to 1rem; skeleton: 1rem to .75rem.

See shared sizing guidance and examples.