Progress bar - CSS Component ​

The ProgressBar component can be used imported from:

Playground ​

Construction ​

The CSS component uses a <div> tag with the z-progress-bar HTML custom attribute.

z-progress-bar ​

The z-progress-bar parameter will use the linear type as default, matching the linear type of the specifications. Make sure you specify the right value and max of the progress bar otherwise the progress bar will not render properly.

Size ​

The linear type can be rendered with the m or s size. Being the m size the default one. Check the size section. To add the size modifier to the z-progress-bar parameter, use the colon (:) as a separator.

The pattern would be <type>:<size>.

Shape ​

Apart from the linear type, there is also the round type. Switching to the round type inside the z-progress-par parameter will render the progress bar with rounded corners.

For the round type, the progress bar can be rendered in more sizes. Possible values are: s, xs, m, l, xl. Check the size section.

Title ​

The progress-bar-title attribute is used to define the title of the progress bar. The title will be rendered on the left side of the progress bar.

highlight ​

We can highlight the style using highlight:

Invalid ​

We change the progress to invalid using data-invalid:

Special uses ​

Caption ​

We can use the ProgressBar together with the Figure

Caption
Caption

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​