Progress
Import
import { VKProgress } from "@vivakits/react-components";Percent
The fill of the progress is specified by the percent prop. Defaults to 0.
Stroke Width
The thickness of the fill can be specified by the strokeWidth prop. Defaults to 16.
Fill Color
The color of the fill can be specified by the strokeColor prop which can be a solid color or a gradient in case of LineProgress only. To have a gradient in CircleProgress fill, gradientColor prop can be used instead with two stop colors.
Rounded
The cap of the fill can be set to rounded by the rounded prop.
Show Info
The info of the progress can be set to be shown by the showInfo prop.
Info
The content of the info can be set by the info prop.
Info position
The position of the info can be set to be inside or outside of the LineProgress with infoPos prop. Default position is middle.
Custom Classes
You can customize the Alert using the containerClassName and fillClassName prop.
Vertical
The LineProgress can be made vertical using the vertical prop.
Rotation
The CircleProgress can increase clockwise or counter-clockwise depending on the rotation prop. Defaults to clockwise.
Status
The Progress can have active, fail and success status set by status prop. Default is active.
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| percent | number | Specifies the progress of the component in percentage. | 0 |
| strokeWidth | number | Specifies the thickness of the fill. | 16 |
| strokeColor | string | Specifies the color of the fill. | - |
| gradientColor | [string, string] | Defines the stop colors if gradient is used in CircleProgress. | - |
| rounded | boolean | Specifies whether the fill cap is rounded or not. | true |
| showInfo | boolean | Specifies whether the text/icon is displayed or not. | true |
| info | ReactNode | Defines the content of the info. | - |
| infoPos | startmiddleend | Specifies the position of the info. | middle |
| containerClassName | string | Specifies the visual appearance of the container. | - |
| fillClassName | string | Specifies the visual appearance of the fill. | - |
| vertical | boolean | Specifies whether the LineProgress is horizontal or vertical. | false |
| rotation | cwccw | Specifies whether the CircleProgress is increasing clockwise or counter-clockwise.. | cw |
| status | successfailactive | Specifies the status of the progress with predefined styles. | active |