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

PropertyDescription
ColorColor of progress bar
Track colorColor of progress track
Show trackWhether the progress track should be shown or not
Line capThe shape of the progress bar start and end
Track dash widthDashes the progress track with each dash having a fixed width
Dash gapDashes the progress bar with a gap between dashes
Track line capThe shape of the progress track start and end
ThicknessThickness of the progress bar
Track dash gapDashes the progress track with a gap between dashes
Start positionPosition in circle where progress bar starts
Track thicknessThickness of the progress track
Dash widthDashes the progress bar with each dash having a fixed width

Configuration Properties

Basic

PropertyDescription
Component nameThe name of the component as it appears in the Screen's component tree
Animation durationDuration of the animation when transitioning to a new value
IndeterminateShow an infinite looping animation, ignoring the value. Should be used when current progress value cannot be determined.
AnimatedWhether transitions to a new value should be animated or not
Minimum valueThe minimum value that progress can be at
Maximum valueThe maximum value that progress can be at

Advanced

PropertyDescription
Track custom dash arrayCustom dash array used for progress track. Overrides all dash-based properties. See stroke-dasharray
Custom dash arrayCustom dash array used for progress bar. Overrides all dash-based properties. See stroke-dasharray
Data offsetOffset from where to start the dashed progress bar
Track dash offsetOffset from where to start the dashed progress track

Data Properties

PropertyDescription
ValueThe 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.