Loader - CSS Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
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.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@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.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Loader.css" />
<!-- #endregion imports -->
<link rel="stylesheet" href="/0.5.0/examples/styles.css" />
<script type="module" src="/0.5.0/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>