Skip to Main Content
Mosaic Logo
Mosaic Logo
  • Home
  • Browse components
  • Use in projects
    • Colors
    • Icons
    • Grid
    • Links
    • Typography
    • Spacing Utilities
    • SVG
    • Accordions
    • Alerts
    • Badges
    • Buttons
    • Copy to clipboard
    • Cards
    • Featured Container
    • Filter Bar
    • Lists
    • Loading Spinners
    • Modals
    • Pagination
    • Progress Bars
    • Progress Indicator
    • Site Banner
    • Tables
    • Tabs
    • Toast
    • Toggle Switches
    • Well
    • Wizard
    • Events
    • File Browser
    • File Upload
    • Footer
    • Header
    • Hero
    • Post Item
    • Profile
    • Sidebar Navigation
    • Splash
    • Stack
    • Form Instructions
    • Form Layout
    • Form Validation
    • Form Output
    • Checkboxes
    • Labels
    • Radio Buttons
    • Search Input
    • Select
    • Text Inputs

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...

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...

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 class spinner-border-sm
Loading...

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: .5rem

JS 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"; 
      })
  • facebook

  • Instagram

  • Twitter

  • LinkedIn

  • YouTube

  • Accessibility
  • Privacy Policy
  • Contact Us
Sign up for our newsletter
ICPSR

© 2025 The Regents of the University of Michigan. ICPSR is part of the Institute for Social Research at the University of Michigan.