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