Progress bar - Web Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Parameters
The Web component uses the <z-progress-bar>
tag:
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
value | number | The current value of the progress bar |
config (optional) | string | The configuration of the progress bar |
progress-bar-title (optional) | string | The title of the progress bar |
caption (optional) | string | The caption of the progress bar |
no-percentage (optional) | boolean | Removes the percentage indication |
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 belinear
orround
.
- The
size
modifier is relative to the previoustype
modifier. The possible values for thelinear
type ares
andm
. The possible values for theround
type arexs
,s
,m
,l
, andxl
.
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.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.0/@zurich/web-components/progress-bar.js"></script>
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 | Link Web Component example</title>
<!-- #region imports -->
<link rel="stylesheet" href="/0.5.0/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.0/@zurich/web-components/progress-bar.js"></script>
<!-- #endregion imports -->
<link rel="stylesheet" href="/0.5.0/examples/styles.css" />
<script type="module" src="/0.5.0/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>
<z-progress-bar config="linear" progress-bar-title="Title" max="100" value="23">
</z-progress-bar>
</div>
</td>
<td>
<div>
<z-progress-bar config="linear" progress-bar-title="Title" max="100" value="23" caption="Linear">
</z-progress-bar>
</div>
</td>
<td>
<div>
<z-progress-bar config="linear:s" progress-bar-title="Title" max="100" value="23" caption="Linear">
</z-progress-bar>
</div>
</td>
</tr>
<tr>
<th>round</th>
<td>
<div>
<z-progress-bar config="round" progress-bar-title="Title" max="100" value="23">
</z-progress-bar>
</div>
</td>
<td>
<div>
<z-progress-bar config="round" progress-bar-title="Title" max="100" value="23" caption="Round">
</z-progress-bar>
</div>
</td>
<td>
<div>
<z-progress-bar config="round:s" progress-bar-title="Title" max="100" value="23" caption="Round">
</z-progress-bar>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>