Loader - CSS Component ​

Browser support ​

Construction ​

The CSS component uses a <div> tag. Using the z-loader HTML custom attribute will render the loader CSS component.

z-loader ​

The z-loader attribute is the main attribute used to render the loader.

It's possible to render a small version of the loader by adding the small attribute to the z-loader attribute.

INFO

You can add a text to the loader adding a <span> tag inside. If the z-loader attribute is small, the content of the text will be hidden.

Loading...

You can customize the color of the loader using the --z-loader--color CSS custom property.

Loading...

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/Loader.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 | Loader CSS example</title>

    <!-- #region imports -->
    <link rel="stylesheet" href="/0.4.2/@zurich/css-components/base.css" />
    <link rel="stylesheet" href="/0.4.2/@zurich/css-components/Loader.css" />
    <!-- #endregion imports -->


    <link rel="stylesheet" href="/0.4.2/examples/styles.css" />
    <script type="module" src="/0.4.2/examples/params-script.js"></script>
  </head>

  <body>
    <table>
      <thead>
        <tr>
          <th>-</th>
          <th>with text</th>
          <th>small</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div>
              <div z-loader></div>
            </div>
          </td>
          <td>
            <div>
              <div z-loader>
                <span>Loading text...</span>
              </div>
            </div>
          </td>
          <td>
            <div>
              <div z-loader="small"></div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>

</html>