Loader

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.

Related

• 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.