Progress bar ​

...

Browser support ​

...

Parameters ​

Hello

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescription

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@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.3.6/@zurich/css-components/base.css" />
    <link rel="stylesheet" href="/0.3.6/@zurich/css-components/ProgressBar.css" />
    <!-- #endregion imports -->


    <link rel="stylesheet" href="/0.3.6/examples/styles.css" />
    <script type="module" src="/0.3.6/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>
            <figure>
              <progress z-progress-bar="linear:s" progress-bar-title="Title" max="100" value="23"></progress>
              <figcaption>Linear</figcaption>
            </figure>
          </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>