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.

Caption

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


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