Progress - Keep React
Table of Contents#
- Default Progress
- Progress Size Variant
- Progress Variant
- Line Progress
- Line Progress Size
- How To Customize
- Circle Progress API
- Line Progress API
Default Progress#
Default Progress allows you to visually represent the progress or completion of a task or process.
Progress Size Variant#
Progress component supports multiple sizes to fit your design needs. Here is available sizes options for the progress component in our design system sm md lg xl and 2xl.
Progress Variant#
The Progress component in our design system comes with two options: LineProgress and CircleProgress
Line Progress#
Line Progress Size#
Progress component supports multiple sizes to fit your design needs. Here is available sizes options for the progress component in our design system sm md lg xl and 2xl.
How To Customize#
Circle Progress API#
Explore the available props for the Circle Progress component:
| Property | Description | Type | Default |
|---|---|---|---|
| size | Defines the available sizes options for progress. | sm md lg xl 2xl | md |
| progress | Defines the progress control for the progress bar. | number | 55 |
| strokeBgColor | Circle Stroke Background Color | string | None |
| strokeColor | Circle Stroke Color | string | None |
| strokeWidth | Circle Stroke Width | number | 2.5 |
| className | Add your own className | string | None |
Line Progress API#
Explore the available props for the Line Progress component:
| Property | Description | Type | Default |
|---|---|---|---|
| size | Defines the available sizes options for progress. | sm md lg xl 2xl | md |
| progress | Defines the progress control for the progress bar. | number | 55 |
| lineBg | Progress line background color | string | None |
| className | Add your own className | string | None |