Progress bar - CSS Component โ
Browser support โ
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.
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.
progress-bar-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.
caption
โ
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.
status
โ
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.
Playground โ
Customization โ
HTML Examples โ
Imports
html
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/ProgressBar.css" />
Code
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZDS | Chip CSS example</title>
<!-- #region imports -->
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/ProgressBar.css" />
<!-- #endregion imports -->
<link rel="stylesheet" href="/0.4.3/examples/styles.css" />
<script type="module" src="/0.4.3/examples/params-script.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>-</th>
<th>with caption</th>
<th>small with caption</th>
</tr>
</thead>
<tbody>
<tr>
<th>linear</th>
<td>
<div>
<progress z-progress-bar="linear" progress-bar-title="Title" max="100" value="23"></progress>
</div>
</td>
<td>
<div>
<figure>
<progress z-progress-bar="linear" progress-bar-title="Title" max="100" value="23"></progress>
<figcaption>Linear</figcaption>
</figure>
</div>
</td>
<td>
<div>
<figure>
<progress z-progress-bar="linear:s" progress-bar-title="Title" max="100" value="23"></progress>
<figcaption>Linear</figcaption>
</figure>
</div>
</td>
</tr>
<tr>
<th>round</th>
<td>
<div>
<progress z-progress-bar="round" progress-bar-title="Title" max="100" value="23"></progress>
</div>
</td>
<td>
<div>
<figure>
<progress z-progress-bar="round" progress-bar-title="Title" max="100" value="23"></progress>
<figcaption>Round</figcaption>
</figure>
</div>
</td>
<td>
<div>
<figure>
<progress z-progress-bar="round:s" progress-bar-title="Title" max="100" value="23"></progress>
<figcaption>Round</figcaption>
</figure>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>