The spinner component helps users see that information on a part of a page is loading or refreshing.
Use the spinner component when an action triggered by a user on a page triggers a background process, request of calculation that when completed loads new information on a part of the page. The load time is typically expected to be longer than a normal load time.
Do not use the spinner component:
In these cases, do not use any spinner component or similar. The load time is expected to be a normal load time.
The spinner will center horizontally and vertically in the .spinner container. Make sure the .spinner container gets the appropriate width and height so that the spinner is also visually centered horizontally and vertically in the container where it appears.
<div class="spinner">
<div>…loading</div>
</div>
<div class="spinner">
<div>…loading</div>
</div>
/* No context defined. */
.spinner {
display: flex;
align-items: center;
justify-content: center;
div {
@include spot-image('spinner', 3rem);
text-indent: 200%;
white-space: nowrap;
overflow: hidden;
animation: spin 2s cubic-bezier(.75, .25, .25, .75) infinite;
}
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}