Loaders

Documentation for loader components.

Files

app/styles/modules/_loader.scss

Loader

Preview of loader element which is specified as shown on example below. Loader should be used in case, when content or response is not available instantly and user needs to wait.

By default, loading state should be announced inside alert component.

Example:
Code:
<div class="loader" aria-hidden="true">
  <div class="loader__page"></div>
  <div class="loader__page"></div>
  <div class="loader__page"></div>
</div>

Sizes

Same as icon sizes there are fours loader sizes: small, medium, large and xlarge. Size for icon can be specified with class .loader--[small/medium/large/xlarge] on the loader element.

Example:

  • XL

  • L

  • M

  • S
Code:
<div class="loader loader--xlarge">...</div>
<div class="loader loader--large">...</div>
<div class="loader loader--medium">...</div>
<div class="loader loader--small">...</div>

Color variants

Two color variants are available: default (grey)/white.

Example:

  • Default

  • White
Code:
<div class="loader loader--medium" aria-hidden="true">
  <svg class="icon icon-loader " role="img" aria-hidden="true">
    <use xlink:href="#icon-loader"></use>
  </svg>
</div>

<div class="loader loader--medium loader--white" aria-hidden="true">
  <svg class="icon icon-loader " role="img" aria-hidden="true">
    <use xlink:href="#icon-loader"></use>
  </svg>
</div>

Loader styles

Two styles are available: default (plain)/rounded.

Example:
Code:
<div class="loader loader--medium" aria-hidden="true">
  <svg class="icon icon-loader " role="img" aria-hidden="true">
    <use xlink:href="#icon-loader"></use>
  </svg>
  <div class="loader__text">Loading</div>
</div>

<div class="loader loader--medium loader--rounded" aria-hidden="true">
  <svg class="icon icon-loader " role="img" aria-hidden="true">
    <use xlink:href="#icon-loader"></use>
  </svg>
  <div class="loader__text">Loading</div>
</div>

Loader overlay

Indicate a section being loaded. Add a .loader-overlay with any loader as it's child inside a section you wish to load. Toggling .is-loading class on the loaded section itself toggles the loader overlay visibility.

Example:

Pane Heading

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Code:
<div class="pane__content is-loading">
  ...
  <div class="loader-overlay">...</div>
</div>