UsageNg Spinner
Default usage with .Square component.
<div class="Square">
<div class="Centered">
<div class="Spinner-vortex">
<span *ngFor="let _ of [1,2,3,4,5,6,7,8]"></span>
</div>
</div>
</div>
With adaptive colors.
<div class="Square">
<div class="Centered">
<div class="Spinner-vortex Quadratic Adaptive">
<span *ngFor="let _ of [1,2,3,4,5,6,7,8]"></span>
</div>
</div>
</div>
Use the border spinners for a lightweight loading indicator
<div class="Spinner-border Fg-accent" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
The border spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities. You can use any of our text color utilities on the standard spinner.
<div class="Spinner-border Fg-red" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-border Fg-orange" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-border Fg-yellow" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-border Fg-lime" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-border Fg-blue" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-border Fg-purple" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-border Fg-magenta" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-border Fg-pink" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
<div class="Spinner-grow Fg-accent" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
Once again, this spinner is built with currentColor, so you can easily change its appearance with text color utilities.
<div class="Spinner-grow Fg-red" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-grow Fg-orange" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-grow Fg-yellow" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-grow Fg-lime" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-grow Fg-blue" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-grow Fg-purple" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-grow Fg-magenta" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-grow Fg-pink" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
Use following code to align spinner center.
<div class="Text-center">
<div class="Spinner-border Fg-accent" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
</div>
Add .Spinner-sm to make a smaller spinner that can quickly be used within other components.
<div class="Spinner-border Fg-accent Spinner-sm" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-grow Fg-accent Spinner-sm" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
Use custom CSS or inline styles to change the dimensions as needed.
<div class="Spinner-border Fg-accent" style="width: 3rem; height: 3rem;" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
<div class="Spinner-grow Fg-accent" style="width: 3rem; height: 3rem;" role="status">
<span class="Visually-hidden">Loading...</span>
</div>
Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
<button class="Btn Btn-primary" type="button" disabled>
<span class="Spinner-border Spinner-sm" role="status" aria-hidden="true"></span>
<span class="Visually-hidden">Loading...</span>
</button>
<button class="Btn Btn-primary" type="button" disabled>
<span class="Spinner-border Spinner-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<button class="Btn Btn-primary" type="button" disabled>
<span class="Spinner-grow Spinner-sm" role="status" aria-hidden="true"></span>
<span class="Visually-hidden">Loading...</span>
</button>
<button class="Btn Btn-primary" type="button" disabled>
<span class="Spinner-grow Spinner-sm" role="status" aria-hidden="true"></span>
Loading...
</button>