Circular Progress

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.