7 loaders Loading effects
When something on the UI is on a loading state, loading effect should take a place.
Source:
styles.scss
, line 56
7.1 loaders.content Content loading
This is loading animation purely designed for content lazy loading. There is multiple different variations to fit different kinds of content.
Examples
Default styling
.content-loading--one-word
This is used to placeholder a single word.
.content-loading--half-width
This is used to fill half of the space.
.content-loading--two-thirds-width
This is used to fill two thirds of the space.
.content-loading--vertical-space
This variation can be used if multiple loading effects are placed above each other.
Markup: components/content-loading/content-loading.twig
<div class="content-loading {{ modifier_class }}"></div>
Source:
components/content-loading/content-loading.scss
, line 1
7.2 loaders.throbber Throbber
This is a default loading animation throbber.
This is used as a general placeholder to load content.
Example
Markup: components/throbber/throbber.twig
<div class="throbber-wrapper">
<div class="throbber">
<svg class="throbber__image" viewBox="25 25 50 50">
<circle class="throbber__path" cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="10"/>
</svg>
</div>
</div>
Source:
components/throbber/throbber.scss
, line 1