Simple Fullscreen Loading Spinner (Free Download)

Welcome to a tutorial on how to create a fullscreen loading spinner. Want to show a “now loading” screen? There’s no need to load an entire library or framework, here’s how to create one yourself. Read on!

 

 

TABLE OF CONTENTS

 

 

EXAMPLE CODE DOWNLOAD

Click here to download. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

FULLSCREEN SPINNER DEMO

 

 

 

TUTORIAL VIDEO

 

PART 1) THE HTML

<!-- (A) LOAD CSS + JS -->
<link rel="stylesheet" href="spinner.css">
<script defer src="spinner.js"></script>
 
<!-- (B) DEMO -->
<button onclick="
  fullspin.show();
  setTimeout(fullspin.hide, 3000);">
  Show Spinner For 3 Seconds
</button>

For you guys who just want to use this as a “plugin”:

1. Load the CSS and Javascript.
2. Call fullspin.show() to show the spinner, and fullspin.hide() to hide it.

 

 

PART 2) THE JAVASCRIPT

var fullspin = {
  // (A) INIT
  wrap : null, 
  init : () => {
    fullspin.wrap = document.createElement("div");
    fullspin.wrap.id = "fullspin";
    document.body.appendChild(fullspin.wrap);
  },
 
  // (B) SHOW & HIDE
  show : () => fullspin.wrap.classList.add("show"),
  hide : () => fullspin.wrap.classList.remove("show")
};
 
window.addEventListener("load", fullspin.init);

What happens in the Javascript:

1. On window load, we call fullspin.init(). All it does is append a <div id="fullspin"> wrapper to the end of the page.
2. How we toggle the fullscreen spinner – Toggle a show CSS class on the <div> wrapper.

 

 

PART 3) THE CSS

/* (A) WRAPPER */
#fullspin {
  /* (A1) COVER FULLSCREEN */
  position: fixed; top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.5);
 
  /* (A2) HIDDEN BY DEFAULT */
  opacity: 0; visibility: hidden;
 
  /* (A3) FADE ANIMATION */
  transition: opacity 0.5s;
}
 
/* (B) SHOW WRAPPER */
#fullspin.show {
  opacity: 1; visibility: visible;
}
 
/* (C) SPINNER */
#fullspin::before {
  display: block; content: "";
  width: 100%; height: 100%;
  background: url(spinner.gif) no-repeat center;
}

Remember that the Javascript only added a <div id="fullspin"> to the page? Here are the key mechanics.

• (A1) Set the wrapper to cover the entire page with a fixed position and 100% viewport width/height.
• (C) Use the ::before pseudo-class of the wrapper to insert the spinner image.
• (A2 & B) Hide the spinner by default. Display it only when we add a show CSS class on the wrapper.

 

 

 

SHOW SPINNER WHILE LOADING

fullspin.show(); // show spinner
fetch("URL")
.then(res => res.text())
.then(txt => console.log(txt)) // do something with fetch result
.catch(err => console.error(err))
.finally(() => fullspin.hide); // hide spinner

Planning to use the spinner while AJAX is working in the background? Simply show it when the loading starts, and hide it when it is done.

 

CUSTOMIZE YOUR SPINNER

Feel free to generate and customize your loading spinner image, there are plenty of online generators that can be used for free:

• loading.io
• preloaders.net

 

INFOGRAPHIC CHEATSHEET

 

LINKS & REFERENCES

• Loading Spinner On Dropdown Box – Code Boxx
• Show Loading Spinner Until Page Loads – Code Boxx