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