Progress

A determinate or indeterminate progress bar.

Import
import { Progress } from '@texuli/primitives/progress';
Pattern
progressbar role
Size budget
4.0 KiB gzip for @texuli/primitives/progress
Reference
packages/primitives/docs/prim-progress.md

Live demo

Loading the Progress demo…

Anatomy

Progress anatomy: each box holds the parts inside it.
  • Progress.Root

Behavior checks

tests/behavior/scenarios/progress.spec.ts runs 3 rows against the Progress scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 3 rows
  1. a progressbar named by its label, with its value and range
  2. a new value is announced
  3. unknown progress has no current value

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.0 KiB gzip for @texuli/primitives/progress (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).