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.
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>.
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.
If you want to insert a caption for the progress-bar component, make sure to wrap the <progress> tag with a <figure> tag and the caption with a <figcaption> tag.
The status attribute it's used to implement the status styling for the progress bar. 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.
