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:
Name | Type | Description |
---|---|---|
z-loader | string | Possible value apart from |
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>