This page ships a Markdown twin for AI tools.

ComponentsProgress

displaytexulinot agent-emittableapp

Progress

progress

A linear or circular progress bar, determinate or indeterminate.

One token contract, every theme. Display components take color, radius, density and state styling from the --tx-* token contract — the same variables the theme strip below overrides — so a theme swap re-colors them without per-component fixes.

Live examples

Upload

Upload

Loading demo…

In your theme

This page renders in the site theme, enterprise-neutral. Every one of the 210 library themes re-colors every component through the --tx-* contract. The three below carry real token values from the library, rendered at build — no island, no extra requests.

  • Violet

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Monochrome

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Accessible Dark Contrast

    dark mode · AAA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

Props

Public props for Progress
NameKindRequiredDefaultDescription
valuenumberno0Current value; omit or null while unknown
maxnumberno100—
minnumberno0—
labelstringno——
ariaLabelstringno——
showValuebooleannofalse—
toneenum (primary, success, warning, destructive, info, neutral)no"primary"—
sizeenum (sm, md, lg)no"md"—
shapeenum (linear, circular)no"linear"—
loadingLabelstringno——
classstringno——

Keyboard

Keyboard behavior for Progress
KeyAction
AA progressbar named by label or ariaLabel; null value is indeterminate.

Accessibility

  • A progressbar named by label or ariaLabel; null value is indeterminate.

Evidence for progress

Latest committed gates for progress (as of 2026-10-23). Static snapshot — not live CI.

Behavior

checkedscenario progress

3 checks

Rows in tests/behavior/scenarios/progress.spec.ts, held to the WAI-ARIA APG pattern, run on Chromium and WebKit, and its touch rows on the Pixel 7.

Size (gzip)

texuli/progress · budget 12.0 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • Show how far a task has gone, or that it is still running

Don’t use when

Prefer another component

  • A short wait with no value (use spinner)