Progress bar - Web Component

The ProgressBar component can be used imported from:

Playground

Parameters

The Web component uses the <z-progress-bar> tag:

By default, all the parameters are optional or can be set in different, except for the ones marked as required

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description	Slot	A11y
value [required]	number	The current value of the progress bar
config	string	The configuration of the progress bar
progress-bar-title	string	The title of the progress bar
caption	string	The caption of the progress bar
no-percentage	boolean	Removes the percentage indication

Parameters use

value

The value parameter is the current value of the progress bar. It must be a number between 0 and 100.

config

The config parameter is a string that defines the type and size of the progress bar. The pattern is <type>:<?size>.

• The type modifier can be linear or round.

• The size modifier is relative to the previous type modifier. The possible values for the linear type are s and m. The possible values for the round type are xs, s, m, l, and xl.

progress-bar-title

The progress-bar-title parameter is a string that defines the title of the progress bar.

caption

The caption parameter is a string that defines the caption of the progress bar.

status

The status parameter is a string that defines the status of the progress bar. The possible values are highlight and error.

You can also customize the color of the progress bar using the --z-progress-bar--color and --z-progress-bar--track CSS custom properties, respectively.

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

HTML Examples

CodeSandbox example