Circular Progress
The Circular 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.
Style Properties
Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.
Component Specific Styles
Property | Description |
---|---|
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 |
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 |
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. |
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 |
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) |
Conditional Display
You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.
Updated 5 months ago