Loading Spinners
Definition
A loading spinner is an animated icon that lets users know content is being loaded.
Description
This version of the loading spinner is built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility.
Examples
Loading Spinner
Loading...
<!-- wrapping the spinner and word with the id loadingDiv allows you to use JS to remove it once the page has loaded. Bootstrap uses !important classes which override display: none used in the JS provided below -->
<div class="text-center" id="loadingDiv">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p>Loading...</p>
</div>Colors Loading Spinner
Using the bootstrap spinner allows us to add the class text-primary, text-secondary, text-success, text-danger, text-warning to change the color of the spinner.
Loading...
Loading
<div class="text-center" id="loadingDiv">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p>Loading...</p>
</div>
<div class="text-center" id="loadingDiv">
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p>Loading</p>
</div>Small Loading Spinner
You can make the size of the loading spinner smaller with the bootstrap classspinner-border-sm Loading...
<div class="d-flex">
<div class="text-center" id="loadingDiv">
<div class="spinner-border text-secondary spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p>Loading...</p>
</div>
</div>
<!-- end-->
`
}Accessibility
For accessibility purposes, each loader here includes role="status" and a nested <span class="visually-hidden">Loading...</span>.
Variables
$spinner-animation-speed: 1.5s
$spinner-width: 5rem
$spinner-border-width: .5remJS to make it disappear
If you just need some simple JS to make the loading spinner disappear once the page is loaded just add the code below.
window.addEventListener('load', (e) => {
document.getElementById("loadingDiv").style.display = "none";
})