Progress Bar
The Progress Bar component in Velocify UI provides a flexible and customizable solution to visually represent task completion or progress. It supports various configurations including size options (small, default, large), style variants (default, secondary), and the ability to display percentage labels. Additional features such as rounded corners and disabled states make it adaptable to different design needs. The component's default progress bar color is customizable, and it seamlessly integrates with your project to deliver a sleek, dynamic progress indicator.
Basic Progress Bar
50%
1<ProgressBar progress={50} />>Progress Bar API Reference
Prop | Type | Default |
|---|---|---|
progress* | number | - |
progressBarColor | string | #F8CC38 |
variant | string | default |
displayPercentage | boolean | true |
disabled | boolean | false |
size | string | default |
* Required | ||
Prop | Types |
|---|---|
variant | default secondary |
size | default small large |
Disabled Progress Bar
50%
1<ProgressBar progress={50} disabled={true} />Progress Bar - Sizes
50%
50%
1<ProgressBar progress={50} size="small" />
2<ProgressBar progress={50} size="default" />
3<ProgressBar progress={50} size="large" />Progress Bar - Rounded
50%
50%
50%
1<ProgressBar progress={50} rounded="full" />
2<ProgressBar progress={50} rounded="default" />
3<ProgressBar progress={50} rounded="none" />Progress Bar - Style Variants
Secondary Variant
50%
1<ProgressBar progress={50} variant="secondary" />