Spinner

The spinner component helps users see that information on a part of a page is loading or refreshing.

When to use this component

Use the spinner component when an action triggered by a user on a page triggers a background process, request of calculation that when completed loads new information on a part of the page. The load time is typically expected to be longer than a normal load time.

When not to use this component

Do not use the spinner component:

  • When a link is clicked.
  • On any full page reload or refresh.
  • When the user did not trigger any action.

In these cases, do not use any spinner component or similar. The load time is expected to be a normal load time.

Usage

The spinner will center horizontally and vertically in the .spinner container. Make sure the .spinner container gets the appropriate width and height so that the spinner is also visually centered horizontally and vertically in the container where it appears.

<div class="spinner">
  <div>&hellip;loading</div>
</div>
<div class="spinner">
    <div>&hellip;loading</div>
</div>
/* No context defined for this component. */
  • Content:
    .spinner {
      display: flex;
      align-items: center;
      justify-content: center;
    
      div {
        @include spot-image('spinner', 7rem);
    
        text-indent: 200%;
        white-space: nowrap;
        overflow: hidden;
        animation: spin 2s cubic-bezier(.75, .25, .25, .75) infinite;
      }
    }
    
    @keyframes spin {
      100% {
        transform: rotate(360deg);
      }
    }
    
  • URL: /components/raw/spinner/_spinner.scss
  • Filesystem Path: components/21-atoms/spinner/_spinner.scss
  • Size: 337 Bytes