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
progress [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
no-percentage	boolean	Removes the percentage indication
invalid	boolean	Invalid state
highlight	boolean	Highlight state

Parameters use

progress

The progress parameter is the current value of the progress bar. It must be a number between 0 and 100 if no max is provided, or between 0 and the max value otherwise.

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.

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.

Flags

no-percentage

The no-percentage parameter is a boolean that defines whether the percentage should be displayed or not.

Special uses

Caption

We can use the ProgressBar together with the Figure

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

HTML Examples

CodeSandbox example