Loader ​

...

Browser support ​

...

Parameters ​

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

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

NameTypeDescription
z-loaderstring

Possible value apart from default is small

INFO

You can add a text to the loader adding a <span> tag inside.

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/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.3.6/@zurich/css-components/base.css" />
    <link rel="stylesheet" href="/0.3.6/@zurich/css-components/Loader.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>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>