Skip to main content

Progress

Stable

Shows task completion as a filled track. Supports determinate (percentage-based) and indeterminate (animated) modes, four semantic variants, and four sizes.

DisplayVhyxSeal

Interactive example

Simulated upload — click Start to begin

Import

tsx
import { Progress } from '@vhyxui/react'

Variants

All semantic variants

Sizes

xs, sm, md, lg

States

Indeterminate — for unknown duration operations

Props

PropTypeDefaultDescription
valuenumber—Current progress value (0–max). Omit or leave undefined for indeterminate.
maxnumber100Maximum value. Used to calculate percentage.
indeterminatebooleanfalseShows the indeterminate animation.
size'xs' | 'sm' | 'md' | 'lg''md'Height of the progress track.
variant'default' | 'success' | 'warning' | 'danger''default'Semantic color variant.
showLabelbooleanfalseDisplays the percentage or custom label text.
labelstring—Custom label text. Overrides the auto-calculated percentage.
contractPartial<ComponentContract>—VhyxSeal contract override.

Also accepts all standard HTMLDivElement attributes.

Accessibility

  • ✓ role="progressbar" with aria-valuenow, aria-valuemin="0", aria-valuemax always set.
  • ✓ Indeterminate mode omits aria-valuenow per ARIA spec for indeterminate progress.
  • ✓ Provide aria-label or aria-labelledby so screen readers announce what is loading.
  • ✓ The label prop text is also set as aria-valuetext for richer announcements.

Agent contract

Default VhyxSeal contract shipped with every Progress.

Default contract
{
  "type": "display",
  "intent": "display-progress",
  "description": "Displays the completion percentage of an ongoing operation",
  "requires": [],
  "requiredPermissions": [],
  "consequence": "None — display only.",
  "affects": [],
  "reversible": false,
  "safetyLevel": "low",
  "requiresConfirmation": false,
  "destructive": false,
  "contractVersion": "0.0.1",
  "fingerprint": "vhyxs_68a10e31"
}

Theming

Override these CSS tokens to theme Progress.

--vhyx-color-accentDefault fill color
--vhyx-color-successSuccess fill color
--vhyx-color-warningWarning fill color
--vhyx-color-dangerDanger fill color
--vhyx-color-bg-mutedTrack background
--vhyx-radius-fullTrack and fill border radius
--vhyx-duration-slowFill transition duration
--vhyx-easing-standardFill transition easing

Examples

Multi-step wizard

Step progress with custom label

Storage usage

Storage indicator with dynamic variant