Loading Figma Code Connected

Loading indicators and spinners show a small animation to indicate that content is loading.

Default loading spinner

The default loading indicator is a classic spinner with a subtle animation. Create this by adding class .hc-loading to a <span> or any element.

<span class="hc-loading"></span>

This default loading spinner is appropriate for all loading use cases. Use it inline, like in a button to indicate something is happening, all the way up to a full screen interstitial loading indicator.

Branded loading

We have a few animated SchoolStatus logo options as loading indicators as well. Create these by appending the class .hc-loading--ss-squeeze and .hc-loading--ss-bg.

<span class="hc-loading hc-loading--ss-squeeze"></span>
<span class="hc-loading hc-loading--ss-bg"></span>

Sizes and use cases

The default size for the loading indicator is safe to use anywhere, but two additional size classes change the size for two important use cases: loadings inside buttons or next to text, and fullscreen loading indicators.

Use class .hc-loading--sm and .hc-loading--lg for these contexts, respectively. These work on all variants.

<span class="hc-loading hc-loading--sm"></span>
<span class="hc-loading"></span>
<span class="hc-loading hc-loading--lg"></span>
<span class="hc-loading hc-loading--ss-squeeze hc-loading--sm"></span>
<span class="hc-loading hc-loading--ss-squeeze"></span>
<span class="hc-loading hc-loading--ss-squeeze hc-loading--lg"></span>

Fullscreen loading

Sometimes a fullscreen interstitial-style loading indicator is necessary while important tasks are running or the user’s focus needs to be interrupted.

Create a fullscreen loading indicator with an optional label by placing the loading inside of an element with class .hc-loading-fullscreen. You can add a label after the loading indicator by just placing any text inside of a <span> or other element.

The loading itself should have the .hc-loading--lg size applied.

<div class="hc-loading-fullscreen">
  <span class="hc-loading hc-loading--lg"></span>
  <span class="hc-text">Loading...</span>
</div>
<!-- demo -->
<div class="flex flex-col gap-3">
  <a href="javascript:;" onclick="document.getElementById('lfs').classList.toggle('hc-hidden');" class="hc-button hc-button--primary hc-button--boost">
    Toggle a fullscreen loading on this page
  </a>
  <span class="hc-micro">Click the loading or this button again to dismiss it.</span>
</div>