Progress
import { CircularProgress, LinearProgress } from "@shpaw415/mui-lite/Progress";Why use it
CircularProgress and LinearProgress indicate work in progress:
| Mode | When to use | API |
|---|---|---|
| Busy (indeterminate) | Waiting with no known % (fetch, spinner) | Default — omit value, or variant="indeterminate" |
| Determinate | Upload/download, steps with a known percent | variant="determinate" + value={0–100} |
Demo
Busy (indeterminate)
Unknown progress — continuous animation while waiting.
Circular
Linear
Determinate
Known progress — pass value from 0 to 100.
Circular · 65%
Linear · 40%
Linear · 80%
Example
import { CircularProgress, LinearProgress } from "@shpaw415/mui-lite/Progress";
// Busy — continuous animation, no value
<CircularProgress />
<LinearProgress />
// Determinate — fill matches value
<CircularProgress variant="determinate" value={75} />
<LinearProgress variant="determinate" value={40} />Props
| Prop | Type | Default |
|---|---|---|
| variant | indeterminate | determinate | buffer (linear) | indeterminate |
| value | 0–100 (required for determinate) | — |
| color | palette | — |
| size (circular) | number | string | — |