Progress
This component is used to show a progress of any process
Use this component to show a determine progress: like file uploading, goal achievement or amount of viewed content. Different variants of Progress can be used in different scenarios.
Variants
There are three variants of Progress:
Default Progress. Looks like a bar with the active segment displayed inside it.
Segmented Progress. Looks like a row with small segments. Active segments filled with color. In Altrone 1.1 and later you can change segment item component via ProgressSegmentComponent
prop.
Circular Progress. This variant looks like a circle with active segment. This variant is available only in Altrone 1.2 and later.
ProgressVariant
ProgressSegmentComponent
In Altrone 1.1 and later you can use your own component for segments in segmented
variant. To do that you have to pass your component which accepts following properties:
Properties
Property | Type | Description |
---|---|---|
|
| Current value of the progress |
|
| Maximum value of the progress. Default value is |
| Variant of the progress. Default value is | |
| Role of the progress | |
| Size of the progress | |
|
| Custom segment component. Works only with |
|
| Custom CSS class |
History
Altrone 1.2
:added
circular
variant
Altrone 1.1
:added
SegmentedItem
prop
Altrone 1.0
: initial release
Last updated