Spinner

Indicate the loading state of a component or page with spinners

About

This component can be used to show the loading state in your projects. They’re built in SVG so you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our utility classes.

For accessibility purposes, each loader here includes role="status" and a nested <span class="sr-only">Loading...</span>.

Example

<div class="nj-spinner" role="status">
  <span class="sr-only">Loading...</span>
</div>

Color variation

You can use the light and gray color by adding nj-spinner--light or nj-spinner--gray class.

<div class="bg-blue-corporate d-inline-block p-1 mb-1 mr-2">
  <div class="nj-spinner nj-spinner--light" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
<div class="nj-spinner nj-spinner--gray" role="status">
  <span class="sr-only">Loading...</span>
</div>

Size variation

There are 4 sizes that you can specify with a modifier class.

lg: 64px (default)
md: 48px
sm: 32px
xs: 24px

<div class="nj-spinner" role="status"> <!-- Large version by default -->
  <span class="sr-only">Loading...</span>
</div>

<div class="nj-spinner nj-spinner--md" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="nj-spinner nj-spinner--sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="nj-spinner nj-spinner--xs" role="status">
  <span class="sr-only">Loading...</span>
</div>

Label

Use flexbox and spacing utilites to place spinner exaclty where you need them in any situation.

<div class="d-flex align-items-start">
  <div class="d-flex flex-column align-items-center mr-5">
    <div class="nj-spinner mb-1" role="status">
      <span class="sr-only">Loading...</span>
    </div>
    <span>Loading</span>
  </div>
  <div class="d-flex align-items-center mr-3">
    <div class="nj-spinner mr-2" role="status">
     <span class="sr-only">Loading...</span>
    </div>
    <span>Loading</span>
  </div>
</div>

With Button component

Use spinners within a disable button to indicate an action is currently processing or taking place and also preventing multiple clicks.

<button type="button" class="nj-btn nj-btn--primary" disabled>
  Loading...
  <div class="nj-spinner nj-spinner--gray nj-spinner--xs ml-1" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</button>