Loaders

Loaders are visual indicators that help inform the user that a page or section within our product is being loaded. Standard loader should only be shown by themselves, whereas fragment loaders can occur in multiple locations.

Standard

Required .sg-loader
Modifiers .loader-on-dark .is-large .is-small .is-centered
<svg class="sg-loader">
<rect class="logo-square bottom-left" width="10" height="10" />
<rect class="logo-square bottom-middle" width="10" height="10" />
<rect class="logo-square middle" width="10" height="10" />
<rect class="logo-square top-middle" width="10" height="10" />
<rect class="logo-square top-right" width="10" height="10" />
<rect class="logo-square middle-left" width="10" height="10" />
<rect class="logo-square middle-right" width="10" height="10" />
</svg>

Guidelines

  • Use the standard loader when only a single region of a page (or the page itself) is loaded asynchronously.
  • Center the loader horizontally and vertically within its enclosing container.
  • Declare a width and height on the enclosing container to minimize visual disruption and reflow as data is loaded.
Don't use multiple standard loaders concurrently on the same page.
Don't place in non-centered locations.

Large

Required .sg-loader .is-large
Modifiers .loader-on-dark .is-centered
<svg class="sg-loader is-large">
<rect class="logo-square bottom-left" width="20" height="20" />
<rect class="logo-square bottom-middle" width="20" height="20" />
<rect class="logo-square middle" width="20" height="20" />
<rect class="logo-square top-middle" width="20" height="20" />
<rect class="logo-square top-right" width="20" height="20" />
<rect class="logo-square middle-left" width="20" height="20" />
<rect class="logo-square middle-right" width="20" height="20" />
</svg>

Small

Required .sg-loader .is-small
Modifiers .loader-on-dark .is-centered
<svg class="sg-loader is-small">
<rect class="logo-square bottom-left" width="5" height="5" />
<rect class="logo-square bottom-middle" width="5" height="5" />
<rect class="logo-square middle" width="5" height="5" />
<rect class="logo-square top-middle" width="5" height="5" />
<rect class="logo-square top-right" width="5" height="5" />
<rect class="logo-square middle-left" width="5" height="5" />
<rect class="logo-square middle-right" width="5" height="5" />
</svg>

Fragment

Required .fragment-loader .fragment-square
<svg class="fragment-loader">
<rect class="fragment-square left" width="10" height="10" />
<rect class="fragment-square middle" width="10" height="10" />
<rect class="fragment-square right" width="10" height="10" />
</svg>

Guidelines

  • Use fragment loaders when multiple regions of a page are loaded asynchronously.
  • Center the loader horizontally and vertically within its container.
  • Declare a width and height on the enclosing container to minimize visual disruption and reflow as data is loaded.
Don't use as a page-level loader.
Don't place in non-centered locations.