ProgressBar
The ProgressBar widget is a progress indicator that shows how far a task has advanced, drawn as a circle or a bar.
Use it to tell users visually where an operation stands when it takes time to finish, such as a download, a load, or an upload.
Definition and role
The ProgressBar widget draws progress as a circle (donut) or a bar (line). Set the progress value (value) between 0 and 1 and the indicator fills to that ratio; leave it unset and it keeps moving as an endless (indeterminate) animation with no completion point. Set the progress color, the background (track) color, and the details specific to each shape.
- Category: Contents
- Default shape: Circular
- Default progress value: Not set (endless animation)
Features
| Feature | Description |
|---|---|
| Indicator shape | Shows progress as either a circle or a bar. |
| Progress value | Set value (0–1) and the indicator fills to that ratio. Leave it unset and it shows an endless (indeterminate) animation with no completion point. |
| Color settings | Set the color of the filled portion (color) and the track background color (backgroundColor) separately. |
| Shape-specific tuning | For the circle, adjust settings such as stroke thickness; for the bar, adjust the height and corner radius. |
| Accessibility | Set the label and value that screen readers read out. |
How to use
- Open the Contents category in the left widget palette.
- Drag and drop the ProgressBar item onto the canvas.
- In the properties panel on the right, choose the shape (
type) — circle or bar. - To pin the progress value, set
valuebetween 0 and 1. (Leave it empty and the indicator shows the endless animation.) - If needed, change the colors with
colorandbackgroundColor, then adjust the stroke thickness for the circle or the height and corner radius for the bar.
Properties
| Property | Description | Default | Value / Type |
|---|---|---|---|
type | Indicator shape. The circle carries its own details, such as stroke thickness, and the bar carries details such as height and corner radius. | Circular | Circular / Linear |
value | Progress value. Leave it unset and the indicator shows an endless (indeterminate) animation. | Not set | Number (0.0 – 1.0) |
backgroundColor | Track (background) color | Not set | Color |
color | Color of the filled portion | Not set | Color |
semanticsLabel | Accessibility label for screen readers | Not set | String |
semanticsValue | Accessibility value for screen readers | Not set | String |
Notes and tips
Leave value unset and the indicator shows an endless (indeterminate) animation with no completion point. To fill a visible progress value, set a number between 0 and 1. Values outside that range are clamped to 0–1 automatically.
Which details you can adjust depends on the shape. The circle offers settings such as stroke thickness, while the bar offers height and corner radius.
Learn more
For the full Widget Control (Property, Method, Event) you use to drive this widget from a script, visit ProgressBar Widget Control.