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:

NameTypeDescription
valuenumberThe current value of the progress bar
config
(optional)		stringThe configuration of the progress bar
progress-bar-title
(optional)		stringThe title of the progress bar
caption
(optional)		stringThe caption of the progress bar
no-percentage
(optional)		booleanRemoves 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 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.

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.4.5/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.5/@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.4.5/@zurich/web-components/styles.css" />
    <script type="module" src="/0.4.5/@zurich/web-components/progress-bar.js"></script>
    <!-- #endregion imports -->

    <link rel="stylesheet" href="/0.4.5/examples/styles.css" />
    <script type="module" src="/0.4.5/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>