Skip to content

progress.md

Latest commit

 

History

History
45 lines (28 loc) · 1.44 KB

progress.md

File metadata and controls

45 lines (28 loc) · 1.44 KB
Raw

Progress

Determinate progress bar with semantic colour variant.

When to use

Use Progress when you know completion percentage (upload, multi-step wizard). For indeterminate waits without a percent, prefer Spinner or skeleton placeholders.

Guidelines

Do

  • Set value and max so assistive tech can announce percent complete.
  • Keep max stable for the operation — do not change mid-flight without resetting value.
  • Use variant for semantic emphasis (danger on failure paths) sparingly.

Don't

  • Show 0–100% for unknown-duration work — use indeterminate patterns instead.
  • Animate the bar without respecting prefers-reduced-motion (kernel handles reduced motion).

Usage

<twig:Progress variant="primary" :value="42" :max="100" />

Compare with Bootstrap progress and Material linear progress.

API Reference

Prop Type Default Description
variant string primary Semantic colour token
value int 0 Current progress
max int 100 Maximum value

Accessibility

  • Exposes role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax.
  • Pair with visible status text when percent alone is insufficient context.

Related