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
<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
: 48pxsm
: 32pxxs
: 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>