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.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Demo The HTML The CSS
The Javascript Useful Bits 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

  • There is nothing to install, so just download and unzip into a folder.
  • 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…

 

STEP 1) THE HTML

Let us start with the easiest part, the HTML. Which is actually just a few lines of code, and should not cause any serious brain damage.

 

THE SCRIPT

index.html
<div id="spinner-back"></div>
<div id="spinner-front">
  <img src="ajax-loader.gif"/><br>
  Now loading...
</div>

Yep, all we need is a few lines of HTML, only 2 HTML <div>:

  • <div id="spinner-back"> acts as the full-page “blackout blocker”, so the user can no longer mess with the page. Remove this one if you do not want to block the entire page.
  • Captain Obvious to the rescue – <div id="spinner-front"> holds the spinner image, and also the “now loading” message.

That’s it, no rocket science.

 

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:

 

 

STEP 2) THE CSS

Next, we will touch on the part that does the heavyweight lifting – The CSS.

 

THE STYLESHEET

spinner.css
/* [FULL SCREEN SPINNER] */
#spinner-back, #spinner-front {
  position: fixed;
  width: 100vw;
  transition: all 1s;
  visibility: hidden;
  opacity: 0;
}
#spinner-back {
  z-index: 998;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
}
#spinner-front {
  z-index: 999;
  color: #fff;
  text-align: center;
  margin-top: 50vh;
  transform: translateY(-50%);
}
#spinner-back.show, #spinner-front.show {
  visibility: visible;
  opacity: 1;
}

/* [DOES NOT QUITE MATTER] */
html, body {
  margin: 0;
  padding: 0;
}

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

  • To create the “full-screen blocker” we set  #spinner-back { width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); }.
  • Then set #spinner-back, #spinner-front { position: fixed }, so they stay on screen and cannot be “scrolled away”.
  • To layer them properly, #spinner-back is set on the behind with z-index: 998 and #spinner-front is in the front with z-index: 999.
  • To horizontally center the spinner image and text, we simply use #spinner-front { text-align: center }. Then to vertically center it, we use a small CSS trick of #spinner-front { margin-top: 50%; transform: translateY(-50%) }.
  • Lastly, we hide the spinner by default – #spinner-back, #spinner-front { visibility: hidden; opacity: 0 }.
  • To toggle between show and hide, we will create a CSS class .show { visibility: visible; opacity: 1 }. This will be dynamically added using Javascript.
  • 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) THE JAVASCRIPT

For this final step, we will show/hide the spinner by toggling the show CSS class on the elements. No worries – there are less than 10 lines of “complicated code” here.

 

THE SCRIPT

spinner.js
function show(){
  document.getElementById("spinner-back").classList.add("show");
  document.getElementById("spinner-front").classList.add("show");
}
function hide(){
  document.getElementById("spinner-back").classList.remove("show");
  document.getElementById("spinner-front").classList.remove("show");
}

Yep, that is all we need. 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.

 

AJAX LOADING

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:

spinner.js
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();
}

 

 

USEFUL BITS

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 “hacks” to bridge the backward compatibility.

 

YOUTUBE TUTORIAL

 

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!

1 thought on “3 Steps Simple Full Screen Loading Spinner in Pure CSS JS”

Leave a Comment

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