Fullscreen Loading Spinner In HTML CSS (Very Simple Example)

Once upon a time, a student wanted to insert a “now loading” screen. She then searched the Internet and decided that using a third-party library and “a plugin” is the easiest way to do so… Nope. You do not need to introduce bloat with an entire library, just a few lines of code will do. Let Master Coffee show you how, let’s go.

 

CODE DOWNLOAD

ZIP File

I have released this under the MIT license, feel free to use it in your own project – Personal or commercial. Some form of credits will be nice though. 🙂

 

 

VIDEO TUTORIAL

 

FULLSCREEN LOADING SPINNER DEMO

Click here to show loading spinner (for 2 seconds).

 

 

1) FULLSCREEN LOADING SPINNER

loading.html
<!-- (PART A) LOADING SPINNER -->
<!-- https://icons8.com/preloaders/ -->
<img id="loading" src="loading.png">
loading.css
/* (PART A) FULLSCREEN LOADING SPINNER */
#loading {
  width: 100vw; height: 100vh; object-fit: none;
  position: fixed; top: 0; left: 0; z-index: 999;
  background: rgba(255, 255, 255, 0.7);
}

For the first part, we will create the fullscreen loading spinner itself.

  • Start by downloading a “now loading” spinner image. Just search for “loading spinner generator”, there are tons of free generators all over the Internet.
  • Next, insert the image into the page <img id="loading" src="loading.png">.
  • Lastly a tad bit of CSS:
    • width: 100vw; height: 100vh; Set the spinner to fill up the entire window with 100% viewport width and height.
    • object-fit: none; We do not want to resize the spinner, so no object fit.
    • position: fixed; top: 0; left: 0; Fix the spinner on the page.
    • z-index: 999; Make sure the spinner is “layered” on the top most.
    • background Optional, set a transparent background color.

 

 

2) SHOW/HIDE LOADING SPINNER

loading.html
<!-- (PART B) SHOW SPINNER -->
<script>
function demo () {
  document.getElementById("loading").classList.add("show");
  setTimeout(
    () => document.getElementById("loading").classList.remove("show"),
    2000
  );
}
</script>
<div onclick="demo()">Show Loading Spinner</div>
loading.css
/* (PART B) SHOW/HIDE LOADING SPINNER */
#loading { opacity: 0; visibility: hidden; transition: all 0.2s; }
#loading.show { opacity: 1; visibility: visible; }

With the spinner in place, the next part is to deal with the show/hide mechanism.

  • Starting with the CSS –
    • #loading { opacity: 0; visibility: hidden; } Hide the spinner by default.
    • transition: all 0.2s; This is optional, adds a nice fade effect.
    • #loading.show { opacity: 1; visibility: visible; } Show the spinner when a “show” CSS class is attached.
  • The Javascript should be self-explanatory now, we only need to toggle the “show” CSS class on the spinner image –
    • document.getElementById("loading").classList.add("show")
    • document.getElementById("loading").classList.hide("show")

 

 

THE END – CSS OR SVG SPINNER?

That’s all for this short tutorial and sharing. Before we end, you may find some CSS and SVG spinners on the Internet instead. Not a problem, it’s pretty much the same – Just wrap it in a fullscreen container.

<style>
#loading {
  display: flex; align-items: center; justify-content: center;
  width: 100vw; height: 100vh; 
  position: fixed; top: 0; left: 0; z-index: 999;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0; visibility: hidden; transition: all 0.2s;
}
#loading.show { opacity: 1; visibility: visible; }
</style>
<div id="loading">CSS OR SVG SPINNER</div>

 

CHEAT SHEET

Fullscreen Loading Spinner in HTML CSS(click to enlarge)