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 aria-live="polite" aria-atomic="true" class="nj-spinner">
  <p class="nj-sr-only">Loading...</p>
</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="nj-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 style="display: inline-block; padding: var(--nj-semantic-size-spacing-16); background: var(--nj-core-color-ultramarine-800); margin-right: var(--nj-semantic-size-spacing-32);">
  <div aria-live="polite" aria-atomic="true" class="nj-spinner nj-spinner--inverse">
    <p class="nj-sr-only">Loading...</p>
  </div>
</div>
  
<div aria-live="polite" aria-atomic="true" class="nj-spinner nj-spinner--grey">
  <p class="nj-sr-only">Loading...</p>
</div>

Size variation

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

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

<!-- Large version by default -->
<div aria-live="polite" aria-atomic="true" class="nj-spinner">
  <p class="nj-sr-only">Loading...</p>
</div>

<div aria-live="polite" aria-atomic="true" class="nj-spinner nj-spinner--md">
  <p class="nj-sr-only">Loading...</p>
</div>

<div aria-live="polite" aria-atomic="true" class="nj-spinner nj-spinner--sm">
  <p class="nj-sr-only">Loading...</p>
</div>

<div aria-live="polite" aria-atomic="true" class="nj-spinner nj-spinner--xs">
  <p class="nj-sr-only">Loading...</p>
</div>

<div aria-live="polite" aria-atomic="true" class="nj-spinner nj-spinner--xxs">
  <p class="nj-sr-only">Loading...</p>
</div>

Label

Some examples with a label

<div style="display: flex; align-items: start; gap: var(--nj-semantic-size-spacing-32);">
  <div style="display: flex; flex-direction: column; gap: var(--nj-semantic-size-spacing-8); align-items: center;">
    <div aria-live="polite" aria-atomic="true" class="nj-spinner"></div>
    <p>Loading</p>
  </div>
  <div style="display: flex; gap: var(--nj-semantic-size-spacing-8); align-items: center;">
    <div aria-live="polite" aria-atomic="true" class="nj-spinner"></div>
    <p style="margin-bottom: 0;">Loading</p>
  </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">
  Submit
  <span aria-live="polite" aria-atomic="true" class="nj-spinner nj-spinner--inverse nj-spinner--xs ml-1">
    <span class="nj-sr-only">Loading...</span>
  </span>
</button>
<button type="button" class="nj-btn" disabled>
  Submit
  <span aria-live="polite" aria-atomic="true" class="nj-spinner nj-spinner--xs ml-1">
    <span class="nj-sr-only">Loading...</span>
  </span>
</button>

Slider

Stamp