Components
Progress
Linear and circular progress indicators.
LinearProgress and CircularProgress show how far a task has come, or that it is running. Both are Server Components.
import LinearProgress from '@hone-ui/react/LinearProgress';
import CircularProgress from '@hone-ui/react/CircularProgress';Examples
<LinearProgress aria-label="Loading" />
<LinearProgress aria-label="Upload" variant="determinate" value={40} />
<LinearProgress aria-label="Video" variant="buffer" value={30} valueBuffer={60} /><CircularProgress aria-label="Loading" />
<CircularProgress aria-label="Upload" variant="determinate" value={60} color="secondary" />
<CircularProgress aria-label="Small" size={20} />LinearProgress props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'determinate', 'indeterminate', 'buffer', 'query' | 'indeterminate' | Show a value or loop. |
value | number from 0 to 100 | Progress for determinate and buffer. | |
valueBuffer | number from 0 to 100 | The buffer for the buffer variant. | |
color | a palette color, 'inherit' or any palette key | 'primary' | The bar color. |
sx, className, style, ref | Standard. |
CircularProgress props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'determinate', 'indeterminate' | 'indeterminate' | Show a value or spin. |
value | number from 0 to 100 | 0 | Progress for determinate. |
size | number, string | 40 | The diameter. A number is pixels. |
thickness | number | 3.6 | The stroke width in a 44-unit view box. |
disableShrink | boolean | false | The arc keeps one length while spinning. |
color | a palette color, 'inherit' or any palette key | 'primary' | The ring color. |
sx, className, style, ref | Standard. |
Notes
- Neither reads theme
defaultProps, because both stay Server Components. - Animations slow down when the user asks for reduced motion.
Accessibility
Both render role="progressbar". The determinate variants report aria-valuenow from 0 to 100.
Give every progressbar a name with aria-label or aria-labelledby.