Skip to content

Progress bar

Progress bars provide a visual feedback on the progression of a process, expressed as a percentage value. Processes visualized in progress bars do not have defined step and their duration and completion depend on the system - e.g. downloads, uploads or installations.

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

From Figma to code

...

Customization

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS VariableTypeDescription
--z-progress-bar--colorcolorMain color
--z-progress-bar--title-colorcolorHeader color
--z-progress-bar--percentage-colorcolorPercentage color
--z-progress-bar--bgcolor
--z-progress-bar--trackcolorTrack color
--z-progress-bar--sizedistance
--z-progress-bar--strokedistance

...