Spinner

Spinner allows the user to know when the system is in progress and when he will end. The spinner is used to indicate the current status of a loading screen or a loading data.

Example

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

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.

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

Color variation

You can use the inverse and grey color by adding nj-spinner--inverse or nj-spinner--grey class.

Loading...
Loading...
<div class="d-inline-block p-1 mb-1 mr-2" style="background: var(--nj-color-palette-ultramarine-800)">
  <div class="nj-spinner nj-spinner--inverse" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

<div class="nj-spinner nj-spinner--grey" 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
Loading...
Loading...
Loading...
Loading...
Loading...
<div class="nj-spinner" role="status">
  <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>

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

Label

Some examples with a label

Loading...
Loading
Loading...
Loading
<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>

Within a button

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 mr-3">
  Loading...
    <div class="nj-spinner nj-spinner--inverse nj-spinner--xs ml-1" role="status">
      <span class="sr-only">Loading...</span>
    </div>
</button>

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