@wmcadigital/ui-loader

Loader styles (and a small helper pattern) for showing loading indicators.

Installation

Using pnpm (monorepo/workspace):

pnpm add @wmcadigital/ui-loader

Using npm:

npm install @wmcadigital/ui-loader

Using yarn:

yarn add @wmcadigital/ui-loader

What this package provides

• Compiled CSS for loader patterns: dist/styles/main.css.
• SCSS source is in src/styles/main.scss. The package exposes the following classes and modifiers:
  • .ds-loader — base circular spinner.
  • .ds-loader--small — reduced size variant.
  • .ds-loader--large — larger size variant.
  • .ds-loader--btn — compact spinner intended for use inline inside buttons (uses smaller dimensions and border-width).
  • .ds-loader__content — visually hidden accessible text for screen readers.

Note: the SCSS defines a variable $ds-loader-animation-speed (default 1s) used by the spinner animation; it is also referenced by other components (for example autocomplete) so changing it may affect those components.

Usage

Basic inline loader:

<div class="ds-loader" role="status" aria-live="polite">
  <span class="ds-loader__content">Loading…</span>
</div>

Small/large variants:

<div class="ds-loader ds-loader--small" aria-hidden="true"></div>
<div class="ds-loader ds-loader--large" aria-hidden="true"></div>

Button shortcut spinner (icon-sized inside a button). Keep the visible spinner aria-hidden and provide accessible text separately:

<button class="wmnds-btn">
  Save
  <span class="ds-loader ds-loader--btn" aria-hidden="true"></span>
  <span class="ds-loader__content">Saving…</span>
  <!-- visually-hidden text should be placed so screen readers announce state as needed -->
</button>

Accessibility

• Use role="status" and aria-live="polite" for loaders that announce progress or state changes to assistive technologies.
• For decorative spinners used purely for visual affordance (for example inline in a button where the button label communicates state), mark the spinner aria-hidden="true" and supply a visually hidden message using .ds-loader__content when needed.
• Ensure any visible text has sufficient contrast and that the spinner does not rely on colour alone to convey important meaning.

Customisation

• Override design tokens via CSS variables (for example --color-primary, --color-background, --color-cta).
• To change the rotation speed globally, override the SCSS variable $ds-loader-animation-speed in your build.

Development

Build from the repository root:

pnpm -w -r run build

See the monorepo README.md and DOCS/ for contributing and publishing guidelines.

# Loader

Loader styles and small JS helper for showing loading indicators.

## Markup

```html
<div class="ds-loader" role="status" aria-live="polite">Loading…</div>
```

# loader

Helps users to understand they need to wait for something to finish happening

## Usage

```ts
import { hello } from '@wmcadigital/ui-loader';
```