Loader - Web Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Parameters ​

The Web component uses the <z-loader> tag:

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

NameTypeDescription
content
(optional)		stringThe text to be displayed in the loader.
small
(optional)		booleanSets the loader as small

The available slots for the component are:

NameTagsDescription
defaultspan
Loading text

small ​

The small parameter is used to define a small loader. If small attribute is set, the text to be displayed won't be shown.

Loading textLoading text content

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.1/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.1/@zurich/web-components/loader.js"></script>
Code
html
<z-loader small></z-loader>
<z-loader content="Loading text"></z-loader>