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

 

DOWNLOAD & DEMO

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

 

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


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

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

 

EXTRA) AJAX LOADING

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

 

 

EXTRA BITS & LINKS

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

 

COMPATIBILITY CHECKS

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:

 

 

LINKS & REFERENCES

 

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 Full Screen Loading Spinner in Pure CSS JS (Free Download)”

    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 *