Components › States & feedback › Loading › Loader

Loader

canon

The lying-eight loader for short waits — buttons, dialogs, inline pending; takes its colour from `color`.

Used in 8 files · 6 areas · 8× — components/AppShell, components/clen-tymu, components/mail, components/notes, components/notifications, pages/SpojitPage

@acrm/ui <Loader>.acrm-loadinf .linf-track .linf-run .acrm-srSourceStoryLegacy card Loading (skeleton).html
ExamplesCodeUsageAccessibilityChangelog

The lying-eight with a bright segment running along the stroke — the default loader for short waits: buttons (via <Button loading>), inline states in dialogs, small pending bits. React packages/ui/src/components/Loader.tsx, primitive .acrm-loadinf in apps/web/src/ds.css.

Long listings loading or paging have their own loader — list-loader, the drumming hand (AD P93). Do not use one where the other belongs.

When to use

  • A button that is saving, sending or deleting — through <Button loading>, which keeps the button's width and blocks a second click.
  • A short inline wait inside a dialog, a panel or a toast.
  • Any wait too short to be worth a skeleton and with no layout to hold.

When not to use

  • A listing loading or paging — that is list-loader.
  • Content whose shape you know — that is skeleton-line / skeleton-list, which prevents the layout shift.
  • A wait long enough that the user will leave — say what is happening in words instead.

Anatomy

  • span.acrm-loadinf containing an aria-hidden <svg> with two paths: .linf-track (the dim rail) and .linf-run (the bright segment).
  • Colour comes from color, so inside a primary or danger button it turns to --fg-on-accent by itself.
  • One size knob, --linf-w (default 28px); the height is always half, because the path is 2:1.

Measured: 28 × 14 px by default; 20 × 10 and 40 × 20 at --linf-w: 20px / 40px. In a loading button the width stays put (62px before, during and after).

Best practices

Do
  • Reach for <Button loading> rather than placing a loader inside a button by hand — it also disables the button.
  • Pass label when the loader stands alone, so the wait is announced as well as drawn.
  • Let the colour come from the surface; on an accent ground it whitens on its own.
Don’t
  • Restyle the stroke, the speed or the colour at the call site.
  • Set --linf-w on a parent: .acrm-loadinf declares it on itself, so an ancestor value is silently overridden. It has to reach the element (.my-scope .acrm-loadinf { --linf-w: 40px }).
  • Expect it to scale with the surrounding font — it does not. In --small, --p and --h2 it is 28px wide in all three.
  • Use it in a listing footer.

Content

  • label is screen-reader text only. Give it a verb (Načítám, Ukládám), or omit it inside an element that already has a name.
  • list-loader — the listing loader, and the only other one.
  • skeleton-line, skeleton-list — waits that have a layout to hold.
  • button — the usual host, through its loading prop.
  • Stories: components--loader--default, --variants, --sizes, --states, --composition.

Source: docs/loading/loader.usage.md · GitLab