A spinner indicates a loading state in your web app, providing a moment for the user to take deep breaths and practice patience. To create a [[Bootstrap]] spinner, first add the spinner element to your HTML file. ```html <div id="spinner" class="d-flex align-items-center d-none"> <strong>Loading...</strong> <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div> </div> ``` Including the class `d-none` will hide the spinner initially. If you want to instead show the spinner, remove `d-none` from the class list. Next, write the JavaScript to hide and unhide the element. ```javascript // show spinner document.getElementById('spinner').classList.remove('d-none'); // hide spinner document.getElementById('spinner').classList.add('d-none'); ``` [Read the docs](https://getbootstrap.com/docs/5.2/components/spinners/) for more.