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 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.
Loading...
Loading...
<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
: 48pxsm
: 32pxxs
: 24px
Loading...
Loading...
Loading...
Loading...
Loading...
<!-- 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
Loading
Loading
<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>