3 Steps Simple Full Screen Loading Spinner in Pure CSS JS

Welcome to a step-by-step tutorial and example on how to create a full-screen loading spinner, with vanilla CSS and (a little bit of) Javascript. Looking to add a “now loading” splash screen, but can’t seem to find a decent one? Well, let us walk through how to create one yourself – In pure CSS and Javascript. No hacks, no external libraries required, 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.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Demo Fullscreen Spinner Useful Bits & Links
Tutorial Video The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

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, please feel free to comment below. I try to answer 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.

 

FULLSCREEN SPINNER DEMO


Now loading…

 

 

FULL-SCREEN LOADING SPINNER

All right, let us now get into building a simple full-screen spinner – No third-party frameworks required.

 

STEP 1) THE HTML

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

spinner.css
/* (A) FULL SCREEN WRAPPER */
#spinner {
  position: fixed;
  top: 0; left: 0; z-index: 9999;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 0.2s;
}
 
/* (B) CENTER LOADING SPINNER */
#spinner img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%);
}
 
/* (C) SHOW & HIDE */
#spinner {
  visibility: hidden;
  opacity: 0;
}
#spinner.show {
  visibility: visible;
  opacity: 1;
}

This looks like another handful, but let’s have a quick summary:

  1. To create the “full-screen layer”, all we have to set is –  #spinner { position: fixed; width: 100vw; height: 100vh; }
  2. To center the spinner image in the page – #spinner img { position: absolute; top: 50%; left: 50%; transform: translate(-50%); }.
  3. Lastly, we hide the spinner by default – #spinner { visibility: hidden; opacity: 0 }. We will use Javascript to toggle a CSS class to show it – .show { visibility: visible; opacity: 1 }.

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

spinner.js
// (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 required.

 

EXTRA) AJAX LOADING

spinner.js
// (B) AJAX DEMO - USE HTTP:// NOT FILE://
function demoAJAX () {
  show(); // BLOCK PAGE WHILE LOADING
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "page.html");
  xhr.onload = function(){
    document.getElementById("container").innerHTML = this.response;
    hide(); // UNBLOCK PAGE
  };
  xhr.send();
}

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:

 

 

USEFUL BITS & LINKS

Now that we are done with the example, and here are a few small extras that you may find useful.

 

COMPATIBILITY ISSUES

Please do take note that this simple CSS spinner uses the viewport width and height units. It is well supported in many modern browsers but will break on the old legacy stone-age browsers… So if you have to support the older technology, you might need to find some “CSS hacks” to bridge the backward compatibility.

 

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:

 

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

Pure CSS Fullscreen Spinner (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this short tutorial. I hope that it has helped you to create a better project, and if you have anything to add to this guide, please feel free to comment below. Good luck and happy coding!

5 thoughts on “3 Steps Simple Full Screen Loading Spinner in Pure CSS JS”

    1. Simplified and updated – Watch the tutorial video. The demo on this page is also verified to be working on Chrome, Firefox, Edge, Opera, Mobile Chrome, Mobile Firefox. Any modern browser for the matter. If it is “not working”, you must be using some really ancient browser… Or your own customizations/plugins messed it up.

Leave a Comment

Your email address will not be published. Required fields are marked *