Progress Bar

A linear progress indicator with an optional label, state icon, and caption. Grab a ref to call animateTo() for eased transitions beyond a plain value update.

Usage


import { ProgressBar } from '@mav-labs-inc/mavkit-react'
 
<ProgressBar value={uploadPct} label="Uploading" />
<ProgressBar indeterminate label="Working…" />

Examples

Basic

Uploading0%

Working…0%

States

Backup0%

Storage0%

Approaching your plan limit

Sync0%

Connection lost

Props

Prop	Type	Default	Description
value	number	0
state	'info' \| 'success' \| 'error' \| 'warning' \| null	—
stateLabel	string	—	Custom accessible label for the current state (defaults per state).
label	string	—
caption	string	—
indeterminate	boolean	false
className	string	—
ref	Ref<ProgressBarHandle>	—	{ setValue(v), getValue(), animateTo(target, duration?) } — animateTo eases with a cubic ease-out curve, default 800ms.