Spinner
A loading indicator displayed as a spinning circle.
Basic Usage
You can create a Spinner by giving a div element the spinner
class.
All Spinners should have a role of status and include text content,
which will be announced by screen readers when the spinner appears.
By default, the text content is displayed underneath the spinner.
<div class="spinner" role="status">Loading...</div>No Label
To create a spinner with no visible label, wrap the text inside a span with the class visually-hidden.
<div class="spinner" role="status">
<span class="visually-hidden">Loading...</span>
</div>Complex Labels
If your label consists of more than one node, wrap it in a span or similar element to group it into a single node.
<div class="spinner" role="status">
<span class="flow densest">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 256 256"
aria-hidden="true"
>
<g fill="currentColor">
<path d="M208 88h-56V32Z" opacity=".2"></path>
<path
d="M184 144h-16a8 8 0 0 0-8 8v56a8 8 0 0 0 16 0v-8h8a28 28 0 0 0 0-56m0 40h-8v-24h8a12 12 0 0 1 0 24m-48-32v56a8 8 0 0 1-16 0v-56a8 8 0 0 1 16 0m-40 56a8 8 0 0 1-8 8H56a8 8 0 0 1-7-12l25.16-44H56a8 8 0 0 1 0-16h32a8 8 0 0 1 7 12l-25.21 44H88a8 8 0 0 1 8 8M213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v72a8 8 0 0 0 16 0V40h88v48a8 8 0 0 0 8 8h48v16a8 8 0 0 0 16 0V88a8 8 0 0 0-2.34-5.66M160 80V51.31L188.69 80Z"
></path>
</g>
</svg>
Zipping your files...
</span>
</div>Label Position
You can change the position of the label by using the label-top, label-right, label-bottom (default), or label-left classes.
<div class="spinner label-top" role="status">Top</div>
<div class="spinner label-right" role="status">Right</div>
<div class="spinner label-bottom" role="status">
Bottom (default)
</div>
<div class="spinner label-left" role="status">Left</div>Sizes
You can make a Spinner smaller by adding the small class or larger by adding the large class.
<div class="spinner small label-right" role="status">
Small
</div>
<div class="spinner label-right" role="status">
Medium (default)
</div>
<div class="spinner large label-right" role="status">
Large
</div>