Top
ProgressBar - Styling & Theming
ProgressBar
To style and customize the appearance of <ProgressBar />, you can use one of the following strategies:
  • Specify a style prop with the desired values.
  • Specify a className - note that this will not override the default class of zippy-react-toolkit-progress-bar, but rather it will be appended to the classes that <ProgressBar /> already has.
Below you can find a list with all the CSS classes applied to <ProgressBar /> as well as when and how they are applied.
ClassNameDescription
zippy-react-toolkit-progress-bar
This is the block className for every <ProgressBar />. Always applied.
zippy-react-toolkit-progress-bar__barsWrapper
Applied on div wrapper that holds fill and remaining parts of the <ProgressBar />.
zippy-react-toolkit-progress-bar__fill
Applied on fill part of the <ProgressBar />.
zippy-react-toolkit-progress-bar__remaining
Applied on remaining part of the <ProgressBar />.
zippy-react-toolkit-progress-bar__label
Applied on label.
zippy-react-toolkit-progress-bar__remaining-label-wrapper
Remaining part of the <ProgressBar /> has two nested elements. label and a div that wraps it. This class name is applied on the label wrapper inside remaining part.
zippy-react-toolkit-progress-bar__fill-label-wrapper
Fill part of the <ProgressBar /> has two nested elements. label and a div that wraps it. This class name is applied on the label wrapper inside fill part.
zippy-react-toolkit-progress-bar__tick
Applied on tick.
zippy-react-toolkit-progress-bar__ticks
Applied on ticks wrapper.
zippy-react-toolkit-progress-bar__step
Applied on step.
zippy-react-toolkit-progress-bar__steps
Applied on steps wrapper.
zippy-react-toolkit-progress-bar__indeterminate
Applied on indeterminate bar.