Progress
The progress component visually represents the completion of a task or process. It's commonly used to indicate the loading state or the completion percentage of a task. Progress bars can be linear or circular, with options to animate the progress for a dynamic user experience. They are essential for keeping users informed about ongoing processes, enhancing the perception of application performance.
Examples
Various examples showcasing different configurations of the component
Examples
50%
Property
Value
Progress
50
Variant
CIRCULAR
Circular
Property
Value
Variant
CIRCULAR_INFINITE
Linear
Property
Value
Variant
LINEAR_INFINITE
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Property
Description
Default Value
Type
Progress
The progress of the progress indicator.
75
Number
Variant
The variant of the progress indicator.
Linear
String
Size
The size of the progress indicator.
Large
String
Color
The color of the progress text and meter.
Color
Did you find what you were looking for?
👍
👎
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. →