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

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

Small

Required .sg-loader .is-small
Modifiers .loader-on-dark .is-centered

Fragment

Required .fragment-loader .fragment-square

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.