Preloader Graphic

Playground

<BasicPreloader visuallyHiddenLabel="Loading" /> /* label text must be localized! */

<aside class="preloader-graphic" aria-live="polite" role="status">
  <span class="preloader-graphic-inner"></span>
  <span class="visually-hidden">Loading...</span>
  <!-- text must be localized! -->
</aside>

Size Variant

The Preloader comes in a variety of sizes:

<>
  Standard:{' '}
  <BasicPreloader visuallyHiddenLabel="Loading" sizeVariant="standard" />
  Large: <BasicPreloader visuallyHiddenLabel="Loading" sizeVariant="large" />
  Extra-Large:{' '}
  <BasicPreloader visuallyHiddenLabel="Loading" sizeVariant="extra-large" />
</>

<>
  <BasicPreloader visuallyHiddenLabel="Loading" sizeVariant="large" />
  <BasicPreloader visuallyHiddenLabel="Loading" sizeVariant="extra-large" />
</>

<aside
  class="preloader-graphic preloader-graphic-large"
  aria-live="polite"
  role="status"
>
  <span class="preloader-graphic-inner"></span>
  <span class="visually-hidden">Loading...</span>
</aside>
<aside
  class="preloader-graphic preloader-graphic-extra-large"
  aria-live="polite"
  role="status"
>
  <span class="preloader-graphic-inner"></span>
  <span class="visually-hidden">Loading...</span>
</aside>

Inline

If you need to render a loader inline with some text, you can use the "inline" option.

<p>
  Please look at this animation
  <BasicPreloader visuallyHiddenLabel="Loading..." inline />
  while you are waiting.
</p>

<p>
  Please look at this animation
  <!-- note: the inline version uses a <span> tag instead of <aside> -->
  <span
    class="preloader-graphic preloader-graphic-inline"
    aria-live="polite"
    role="status"
  >
    <span class="preloader-graphic-inner"></span>
    <span class="visually-hidden">Loading...</span>
  </span>
  while you are waiting.
</p>

Centered

The "centered" option centers the Preloader Graphic within its container.

<BasicPreloader visuallyHiddenLabel="Loading" centered />

<aside
  class="preloader-graphic preloader-graphic-center"
  aria-live="polite"
  role="status"
>
  <span class="preloader-graphic-inner"></span>
  <span class="visually-hidden">Loading...</span>
</aside>

Button Loader

Sometimes when a button is clicked, the user needs to wait for a little bit while things are processing. In order to indicate that some sort of processing is taking place, you can render a Preloader inside of a TextButton.

When a Preloader is rendered inside of a TextButton, it gets a new look that's specifically designed for buttons.

<TextButton>
  <BasicPreloader />
  Reload
</TextButton>

() => {
  const [isPlacingOrder, setIsPlacingOrder] = React.useState(false)
  return (
    <TextButton
      onClick={() => {
        setIsPlacingOrder(true)
        // reset the button after a few seconds for demo purposes
        setTimeout(() => {
          setIsPlacingOrder(false)
        }, 2000)
      }}
    >
      {isPlacingOrder && <BasicPreloader />}
      {isPlacingOrder ? 'Placing order' : 'Place order'}
    </TextButton>
  )
}

Skeleton screen

Skeleton screens are a form of loader, separate from the Preloader Graphic component. They show the page's UI and layout, but with a blank, shimmering content that tells the user that the content is still loading.

You can build skeleton screens using the Background Color feature, and choosing the "loading-shimmer" color. This will give the shimmering "skeleton screen" background to the component that has the Background Color on it.

<>
  <Box backgroundColor="loading-shimmer" mb="8" style={{ height: 30 }}></Box>

  <StandardTile skin="product">
    <StandardTileImage backgroundColor="loading-shimmer"></StandardTileImage>
    <StandardTileContents>
      <StandardTileName>Tile name</StandardTileName>
      <StandardTileDescription>Tile description</StandardTileDescription>
    </StandardTileContents>
  </StandardTile>
</>

Components

React

If you need more control over the individual elements of the BasicPreloader, you can use the composition-API to customize each individual component.

<Preloader>
  <PreloaderInner />
  <VisuallyHidden>Loading</VisuallyHidden>
</Preloader>

Convenience Components

The React BasicPreloader component is a convenience component created by combining basic components together, so if you find that it isn't exactly what you need, you can easily compose your own version!

It is based on the Preloader and PreloaderInner components. The visuallyHiddenLabel is placed inside of a VisuallyHidden, and the rest of the props are forwarded to the Preloader.

What's Under the Hood?

<Preloader {...otherProps}>
  <PreloaderInner />
  <VisuallyHidden>{visuallyHiddenLabel}</VisuallyHidden>
</Preloader>

Guidelines

Developer Guidelines

• While the Visage package also includes a preloader .GIF for legacy reasons, we recommend using it only when absolutely necessary (e.g. there's no other choice but to do the preloader as a background image). The Preloader Graphic component is preferable because it loads faster than the .GIF, and has crisper edges (because it uses vector graphics).

Accessibility Guidelines

• To support accessibility, the component needs visually hidden text inside it that describes what is happening (e.g. "Loading..."). In React, the visuallyHiddenLabel for BasicPreloader takes care of this.