Skip to main content
K
Last modified: 24/Jun/2024

Progress Bar

Determinate indicators display how long a process will take. They should be used when the process completion rate can be detected.

#Usage

import { ProgressBar } from '@kinsta/stratus' const MyComponent = () => ( <ProgressBar currentValue={30} maxValue={100} /> )

#Props

#label
string | number | ReactElement<any, string | JSXElementConstructor<any>>
The text above the progress bar
#minValue
number
The min value of the progress bar
0
#maxValue
number
The max value of the progress bar
100
#currentValue
Required
number
The current value of the progress bar
#theme
ProgressBarTheme
The theme of the counter
positive
string | number | ReactElement<any, string | JSXElementConstructor<any>>
A custom legend of the progress bar

#Types

  • ProgressBarProps: props of the ProgressBar component processed by stratus

Read more about types here


#See also