Loader

Indeterminate loader for operations without a known duration. Eight dots orbit with a cascade pulse. Styles live in scss/components/_loader.scss. When you can show percent complete, use Progress instead.

Sizes and types

Four footprints (24 to 48px) and two color treatments. Each loader needs role="status" and an accessible name via aria-label.

In context

Pair the loader with aria-busy="true" on the loading region. Hide the loader with the hidden attribute when idle so assistive tech is not announced repeatedly.

<div class="loader loader--32 loader--primary" role="status" aria-live="polite" aria-label="Loading"><span class="loader__dot" aria-hidden="true"></span><span class="loader__dot" aria-hidden="true"></span><span class="loader__dot" aria-hidden="true"></span><span class="loader__dot" aria-hidden="true"></span><span class="loader__dot" aria-hidden="true"></span><span class="loader__dot" aria-hidden="true"></span><span class="loader__dot" aria-hidden="true"></span><span class="loader__dot" aria-hidden="true"></span></div>

Behavior in your app

Copy docs-site/src/lib/loader-behavior.ts and call wireAllLoaders() after load, or toggle aria-busy and hidden from your data layer.

import { setLoaderBusy, wireAllLoaders } from './loader-behavior';

wireAllLoaders();

// Or control a region directly:
const panel = document.getElementById('my-panel');
setLoaderBusy(panel, true);
// … fetch …
setLoaderBusy(panel, false);

Class reference

Customize (Sass)

1. 01

   Loader layout

   Override footprint, dot size, and orbit distance before importing components.
   variables

   @use "pimentcss-design-system" with (
     $loader-size-48: 3.5rem,
     $loader-dot-32: 5px,
     $loader-orbit-ratio: 0.4
   );

2. 02

   Rebuild CSS

   Run after editing _loader.scss.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps