ProgressBar
How far along something is.
The frame above shows the real web components, in the mode this site is in.
The design preview shows it next to every other web component.
When to use it
Section titled “When to use it”- For work of unknown length, use a Spinner.
Example
Section titled “Example”import { ProgressBar } from "@acme/ui";
<ProgressBar label="Upload" value={0.6} />Options
Section titled “Options”The web component’s props. The other platforms take the same options under their own naming conventions.
| Prop | Type | Notes |
|---|---|---|
value |
number |
Required. From 0 to 1. |
label |
string |
Required. A screen reader reads it with the percentage. |
Source
Section titled “Source”| Platform | File |
|---|---|
| Web (React) | packages/ui/src/ProgressBar.tsx |
| Desktop (GPUI) | crates/acme-ui/src/controls.rs |
| React Native | packages/ui-native/src/ProgressBar.tsx |
| Compose Multiplatform | kotlin/ui/src/commonMain/kotlin/acme/ui/ProgressBar.kt |