Determinate
Pass a value (0-100) for a fixed progress bar. The fill tracks the percentage.
import { Progress } from '@mihcm/ui/Progress';
<Progress value={45} />Indeterminate
Omit value for an indeterminate shimmer. Use when the duration is unknown.
<Progress label="Processing…" />With percentage display
showValue renders the percentage as text alongside the bar.
75%
<Progress value={75} showValue />Tones
Each tone maps to a semantic context. Use danger for critical thresholds, success for completion.
<Progress value={80} tone="primary" />
<Progress value={60} tone="accent" />
<Progress value={100} tone="success" />
<Progress value={40} tone="warning" />
<Progress value={20} tone="danger" />Sizes
<Progress value={50} size="sm" />
<Progress value={50} size="md" />
<Progress value={50} size="lg" />Custom max value
30%
<Progress value={3} max={10} showValue label="Steps completed" />