Linear Progress
The Linear Progress component renders a numerical progress value visually.
How to use
The component has a Value prop in the Data properties that can be a static or dynamic value. You can use the Config props to adjust the style and behavior as needed.
Configuration Properties
Basic
| Property | Description |
|---|---|
| Component name | The name of the component as it appears in the Screen's component tree |
| Animation duration | Duration of the animation when transitioning to a new value |
| Indeterminate | Show an infinite looping animation, ignoring the value. Should be used when current progress value cannot be determined. |
| Color | Color of progress bar |
| Track color | Color of progress track |
| Show track | Whether the progress track should be shown or not |
| Line cap | The shape of the progress bar start and end |
| Track dash width | Dashes the progress track with each dash having a fixed width |
| Dash gap | Dashes the progress bar with a gap between dashes |
| Track line cap | The shape of the progress track start and end |
| Animated | Whether transitions to a new value should be animated or not |
| Minimum value | The minimum value that progress can be at |
| Maximum value | The maximum value that progress can be at |
| Thickness | Thickness of the progress bar |
| Track dash gap | Dashes the progress track with a gap between dashes |
| Start position | Position in circle where progress bar starts |
| Track thickness | Thickness of the progress track |
| Dash width | Dashes the progress bar with each dash having a fixed width |
Advanced
| Property | Description |
|---|---|
| Track custom dash array | Custom dash array used for progress track. Overrides all dash-based properties. See stroke-dasharray |
| Custom dash array | Custom dash array used for progress bar. Overrides all dash-based properties. See stroke-dasharray |
| Data offset | Offset from where to start the dashed progress bar |
| Track dash offset | Offset from where to start the dashed progress track |
Data Properties
| Property | Description |
|---|---|
| Value | The current progress to display. Should be a number between the minimum value and maximum value (defaults to between 0 and 100) |
Updated 2 months ago