3 Steps Full Screen Loading Spinner in Pure CSS JS (Free Download)

Welcome to a tutorial and example on how to create a full-screen loading spinner, with pure CSS and (a little bit of) Javascript. Looking to add a “now loading” splash screen, but can’t find a decent one? Well, let us walk through how to create one – No hacks, no external libraries required, and no script bloats. Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

• A gentle reminder on the AJAX demo – AJAX will only work with http://, not file://. Also, things might load so fast on localhost that the spinner will not even show up.

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

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

 

FULLSCREEN SPINNER DEMO

 

 

 

STEP 1) THE HTML

<div id="spinner">
  <img src="ajax-loader.gif">
</div>

Yep, that is just a spinner image sandwiched in a <div>:

• <div id="spinner"> is the full-page wrapper for the loading spinner.
• Captain Obvious to the rescue – <img src="ajax-loader.gif"> is the animated spinner image.

That’s it, no rocket science is required.

 

STEP 2) THE CSS

/* (A) LOADING SPINNER */
#spinner {
  /* (A1) COVER FULL SCREEN */
  position: fixed;
  top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 0.2s;
 
  /* (A2) CENTER SPINNER */
  display: flex;
  align-items: center; justify-content: center;
 
  /* (A3) HIDE BY DEFAULT */
  visibility: hidden; opacity: 0;
}
 
/* (A4) SHOW SPINNER */
#spinner.show { visibility: visible; opacity: 1; }
 
/* (B) RECOMMENDED - NO PAGE MARGIN */
html, body { margin: 0; }

This looks like a handful, but let’s have a quick summary of the essential parts:

• (A1) To create a “full-screen layer”, all we have to set is –  position: fixed; width: 100vw; height: 100vh;
• (A1) Set a transparent background color – background: rgba(0, 0, 0, 0.7);
• (A2) Center the spinner image on the page – display: flex; align-items: center; justify-content: center;
• (A3 & A4) Lastly, hide the spinner by default – visibility: hidden; opacity: 0. Use Javascript to toggle a CSS class to show it – .show { visibility: visible; opacity: 1 }.
• (B) It is highly recommended to set margin: 0 on the page itself, or there will be a “weird white border” when the full page spinner shows.

Just in case someone is wondering why we don’t use display: none – CSS animation will not work with it. That is why we use opacity instead to create a nice fade-in/out effect.

 

 

STEP 3) JAVASCRIPT

// (A) SHOW & HIDE SPINNER
function show () {
  document.getElementById("spinner").classList.add("show");
}
function hide () {
  document.getElementById("spinner").classList.remove("show");
}

Finally, this is all we need for the Javascript. We are basically just toggling the .show CSS class to show/hide the full-screen spinner. Remember the CSS transition part? That will deal with the fade effect automagically, no extra lines of code are required.

 

EXTRA) AJAX LOADING

// (B) AJAX DEMO - USE HTTP:// NOT FILE://
function demoAJAX () {
  show(); // show spinner
  fetch("page.html")
  .then(res => res.text())
  .then(txt => document.getElementById("demo").innerHTML = txt)
  .catch(err => console.error(err)) // optional
  .finally(() => 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.

 

 

 

COMPATIBILITY CHECKS

• Viewport Units (vw mh) – CanIUse
• CSS 2D Transform – CanIUse
• CSS3 Colors (rgba, hsla) – CanIUse

This spinner works across all modern browsers. If it’s not working… You are probably still using the ancient Internet Exploder, or your own customizations screwed it up.

 

PIMP THE SPINNER

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

• loading.io
• ajaxload.info
• preloaders.net

 

 

LINKS & REFERENCES

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

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET