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://
, notfile://
. Also, things might load so fast onlocalhost
that the spinner will not even show up.
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
<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.
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
- 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:
LINKS & REFERENCES
- Loading Spinner On Dropdown Box – Code Boxx
- Show Loading Spinner Until Page Loads – Code Boxx
TUTORIAL VIDEO
INFOGRAPHIC CHEAT SHEET

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!
Well… simply don’t do anything… no errors, but the loader not show
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.
sorry didnt work
https://code-boxx.com/faq/#notwork
Awesome!