Progress
Determinate and indeterminate task progress with size and semantic status axes.
Contract
| Axis | Values | Default |
|---|---|---|
variant | neutral, info, success, warning, danger | neutral |
uiSize | md, lg | md |
| parts | Root, Label, Track, Indicator, Value | compound API |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/progress.css';Scroll inside the code area to read long lines.
Imports
import { TRProgress } from '@tinyrack/ui/components/progress';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Sizes permalink
Choose a track thickness that fits the surrounding layout. Size does not communicate task importance.
Semantic variants permalink
Set the variant from task meaning; Progress does not infer status from the numeric value.
Custom range and formatting permalink
The visual fill, visible value, and accessible value text all share the same 0–64 GB range.
API
Base UI supplies value semantics. Pass null for indeterminate progress so aria-valuenow is omitted; the moving indicator is disabled under reduced motion.
Root
| Prop | Type | Default | Purpose |
|---|---|---|---|
value | number | null | required | Current value; null selects indeterminate progress |
min | number | 0 | Range minimum |
max | number | 100 | Range maximum |
format | Intl.NumberFormatOptions | — | Formats Value and the default accessible value text |
locale | Intl.LocalesArgument | runtime locale | Locale used by Intl.NumberFormat |
getAriaValueText | (formattedValue, value) => string | built in | Customizes aria-valuetext |
uiSize | md | lg | md | Track thickness |
variant | neutral | info | success | warning | danger | neutral | Semantic fill color |
render | Base UI render prop | <div> | Replaces the native root while preserving behavior |
TRProgressStatus is 'indeterminate' | 'progressing' | 'complete'. Root and every part also accept their native props, className, style, and ref.
Parts
| Part | Default element | Purpose |
|---|---|---|
Root | div | Accessible progressbar and shared range context |
Label | span | Visible accessible name |
Track | div | Full range surface |
Indicator | div | Determinate fill or indeterminate motion |
Value | span | Formatted, visually displayed value |
Tokens
| CSS token | Default | Purpose |
|---|---|---|
--tr-progress-background | --tinyrack-surface-muted | Track surface |
--tr-progress-fill | semantic variant color | Indicator fill |
--tr-progress-height | size recipe | Track thickness |
--tr-progress-radius | --tinyrack-radius-full | Track radius |
--tr-progress-duration | --tinyrack-duration-normal | Determinate width transition |
--tr-progress-easing | --tinyrack-ease-out | Determinate easing |
--tr-progress-indeterminate-duration | --tinyrack-duration-loading | Indeterminate cycle |
--tr-progress-indeterminate-easing | --tinyrack-ease-linear | Indeterminate easing |
--tr-progress-indeterminate-width | 40% | Moving indicator measure |