Loader

Jello Animation 

<span class="JelloAnimation">
  <span class="JelloAnimation-shadow"></span>
  <span class="JelloAnimation-box"></span>
</span>

Pulse Animation 

<span class="PulseAnimation">
  <span class="PulseAnimation-dot"></span>
  <span class="PulseAnimation-dot"></span>
  <span class="PulseAnimation-dot"></span>
</span>

Spin Animation 

<span class="SpinAnimation"></span>

Loader

  • To make an animation a block level load indicator, just wrap in the Loader element
<div class="Loader">
  <span class="SpinAnimation"></span>
</div>

Loader With Text

  • Adding text around your loader requires a little more markup
  • By default loader text uses works with the spin animation
  • The Loader--jello modifier should be added to work with the jello animation
Loading
Nice Shirt! Is that Velour?
<div class="Loader">
  <div class="Loader-indicator">
    <span class="SpinAnimation"></span>
    <div class="Loader-indicatorText">Loading</div>
  </div>
  <div class="Loader-message">Nice Shirt! Is that Velour?</div>
</div>

Jello Loader Modifier

Scheduling Games..
Nice Shirt! Is that Velour?
<div class="Loader Loader--jello">
  <div class="Loader-indicator">
    <span class="JelloAnimation">
      <span class="JelloAnimation-shadow"></span>
      <span class="JelloAnimation-box"></span>
    </span>
    <div class="Loader-indicatorText">Scheduling Games..</div>
  </div>
  <div class="Loader-message">Nice Shirt! Is that Velour?</div>
</div>

Loader Icon

In cases where a loader needs to display inline, or act similarly to an icon (inheriting parent color and size), there is an SVG loader icon that works with the .Icon styles. Simply add the Icon--loader modifier to apply the animation.

Heading element with loading icon 

<button class="Button Button--smallSquare Button--primary">
  <svg viewBox="0 0 66 66" role="presentation" class="Icon Icon--loader">
    <circle fill="none" stroke-width="12" stroke="currentColor" stroke-linecap="round" cx="33" cy="33" r="24" />
  </svg>
</button>

<h1>
  <svg viewBox="0 0 66 66" role="presentation" class="Icon Icon--loader">
   <circle fill="none" stroke-width="12" stroke="currentColor" stroke-linecap="round" cx="33" cy="33" r="24"/>
</svg>
  Heading element with loading icon
</h1>

<button class="Button Button--large">
  <svg viewBox="0 0 66 66" role="presentation" class="Icon Icon--loader u-spaceRightSm">
    <circle fill="none" stroke-width="12" stroke="currentColor" stroke-linecap="round" cx="33" cy="33" r="24" />
  </svg>
  Loading
</button>