Progress
LinearProgress is a bar and CircularProgress a ring, both showing how far a task has run. Leave out percentage for an indeterminate progress that loops while the amount of work is unknown. A mini CircularProgress is a tiny ring or pie for a table cell or beside a chat message.
Demos
Linear
percentage runs from 0 to 100; the bar eases to each new value.
Status
status colors the fill: default, info, success, warning or error. Outside the bar a non-default status shows its icon instead of the percentage.
Indicator
indicatorPlacement="inside" puts the percentage in a taller fill; showIndicator={false} hides it; unit follows the number.
Processing
processing runs a light sweep across the fill to show work is ongoing.
Circular
CircularProgress takes the same percentage and status; the indicator sits in the middle.
Circular size
size is the diameter in px and the text scales with it. strokeWidth is relative to a circle 100 units across, so a small ring wants a thicker stroke.
Dashboard
gapDegree opens the ring at the bottom; gapOffsetDegree turns the gap. children replace the indicator.
Indeterminate
Without percentage a segment slides along the bar, or a quarter arc spins round the ring, and aria-valuenow is left out. With reduced motion it stays put and only fades in and out.
Mini
mini makes a ring about one line of text tall, for a table cell or beside a chat message, such as how many people have read it. miniShape="pie" fills a sector clockwise from 12 o’clock instead, and a finished success pie turns into a check. Mini ignores size, strokeWidth, the gap and the indicator; the rail is a light tint of the fill.
Color
color, railColor and indicatorTextColor override the theme’s colors: take them from the Raft palette so they follow the theme.
Shared Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
percentage | number | undefined | 0 to 100. Leave it out for an indeterminate progress. | Unreleased |
status | default | info | success | warning | error | default | Fill color role; a non-default status shows an icon as the indicator. | Unreleased |
showIndicator | boolean | true | Shows the percentage or status icon. | Unreleased |
unit | string | % | Shown after the percentage. | Unreleased |
color | string | undefined | A custom fill color. | Unreleased |
railColor | string | undefined | A custom rail color. | Unreleased |
indicatorTextColor | string | undefined | A custom indicator text color. | Unreleased |
children | ReactNode | undefined | Replaces the indicator. | Unreleased |
LinearProgress Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
indicatorPlacement | inside | outside | outside | After the rail, or inside a taller fill. | Unreleased |
height | number | undefined | Rail height in px. Defaults to the theme’s height. | Unreleased |
processing | boolean | false | A light sweep runs across the fill. | Unreleased |
CircularProgress Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
size | number | undefined | Diameter in px. Defaults to the theme’s size (120). | Unreleased |
strokeWidth | number | 7 | Stroke width relative to a circle 100 units across. | Unreleased |
gapDegree | number | 0 | Degrees left open at the bottom. Ignored when indeterminate. | Unreleased |
gapOffsetDegree | number | 0 | Turns the gap clockwise. | Unreleased |
mini | boolean | false | A tiny ring or pie at the theme’s mini size, with no indicator. | Unreleased |
miniShape | ring | pie | ring | A mini progress’s look. | Unreleased |
There are two components, LinearProgress and CircularProgress; a dashboard is a CircularProgress with a gapDegree. Several rings in one progress and gradient colors are not supported yet. Both render role="progressbar" with aria-valuemin, aria-valuemax and, unless indeterminate, aria-valuenow: give each an aria-label.