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.

Angular

React

Vanilla

Figma

Last updated v5.0.0

Example

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

<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

<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

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

Slider

Stamp