Loading Spinner

Pure CSS loading spinner utilities for @bnotk/dsx.

Live Preview

Import

<link rel="stylesheet" href="@bnotk/dsx/css/loading-spinner.css">

Or use the full bundle:

<link rel="stylesheet" href="@bnotk/dsx/css/index.css">

Classes

Class	Purpose
`.dsx-spinner`	Base spinner
`.dsx-spinner--sm` / `--lg` / `--xl`	Size variants
`.dsx-spinner--white`	White spinner for dark backgrounds
`.dsx-spinner--highlight`	Highlight-colored spinner
`.dsx-spinner-wrapper`	Inline label + spinner layout

Behavior

The spinner is a bordered circle with only the top border colored.
Animation uses @keyframes dsx-spin at 0.8s linear infinite.
Size variants change width, height, and border width.
Wrapper text uses var(--ds2-font-size-sm) and var(--ds2-color-grey-5).

Example

<div class="dsx-spinner-wrapper" role="status" aria-live="polite">
  <span class="dsx-spinner dsx-spinner--highlight" aria-hidden="true"></span>
  <span>Loading customer data…</span>
</div>

Accessibility notes

Pair the spinner with text or an accessible live region when loading matters.
Mark purely decorative spinners with aria-hidden="true".
Avoid relying on animation alone to explain what is happening.