Motion UIComponentsComponent

Progress bar

A horizontal progress fill that reveals on entrance, with optional benchmark ticks.

API reference

Components

`<ProgressBar />`

Horizontal progress track with optional reveal, reference tick, and label slots.

`value`

number

Fill length in [0,1]. Clamped; drives width and aria-valuenow when progressbar is set.

`reveal?`

boolean = false

Animate the fill with a left-anchored scaleX reveal on the theme ui spring.

`revealed?`

boolean = true

Gate for reveal. While false the fill holds at scaleX 0. Default true.

`index?`

number = 0

Stagger index: delay = index * theme.stagger.base. Default 0.

`referenceTick?`

number

Optional reference marker at a share in [0,1]. Decorative; aria-hidden.

`highlight?`

boolean = false

Paint the fill with bg-primary. Default false.

`tone?`

string = DEFAULT_FILL_TONE

Opaque colour for a non-highlighted fill. Ignored when highlight is set.

`size?`

"sm" | "md" = "md"

Track height: "sm" (4px) or "md" (8px).

`progressbar?`

boolean = false

Expose the track as an ARIA progressbar.

`"aria-label"?`

string

Accessible name when progressbar is set.

`label?`

ReactNode

Leading label slot.

`valueLabel?`

ReactNode

Trailing label slot.

`labelPlacement?`

"top" | "bottom" = "top"

Label row placement relative to the track. Default "top".

`className?`

string

Merged onto the root wrapper.

`ref?`

Ref<HTMLDivElement>

Forwarded ref on the root wrapper.