Skip to content 
Progress bar - Web Component
The ProgressBar component can be used imported from:
Playground
Parameters
...
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>.
type
The type modifier can be linear or round.
size
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.
Flags
no-percentage
The no-percentage parameter is a boolean that defines whether the percentage should be displayed or not.
highlight
The highlight parameter is a boolean that defines whether the progress bar should be highlighted or not.
invalid
The invalid parameter is a boolean that defines whether the progress bar should be invalid or not.
Special uses
Caption
We can use the ProgressBar together with the Figure
Browser support
Detected engine:
Chromium
Webkit
Gecko