Simple Fullscreen Spinner
Here is a very simple fullscreen spinner that fades out on your site load, and improves the UX of your site. I am using jQuery, but this can also be done using plain vanilla JavaScript.
At the top of my body, I placed a div that will be the fullscreen container and a spinner SVG
<div class="fullscreen-spinner">
<img src="spinner.svg" alt="spinner logo" />
</div>
You can make a spinner with CSS, but I prefer to use this site for my spinner SVGs.
Next, in CSS, we just need to style the fullscreen spinner container
.fullscreen-spinner {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100000;
background: #225470;
display: flex;
justify-content: center;
align-items: center;
}
I give the spinner container a width of 100vw
and 100vh
which will take up the whole browser at any width and height. I also set position fixed so no matter where the user is on the site, this fullscreen div will cover the loading content.
Make sure the z-index is higher than everything else on the site, and give the div a background color that goes well with your design.
Last, in our CSS, I display the div as flex so I can position the SVG in the center using justify-content: center and align-items: center.
The last step is the JS to hide the spinner when the site has loaded. At the bottom of my body, after my scripts, I place script tags to hide the spinner
<script language="javascript" type="text/javascript">
$(window).on("load", function() {
$(".fullscreen-spinner").fadeOut()
})
</script>
Once again, I’m using jQuery but this can still be done a little differently with vanilla JS.
I target the fullscreen spinner div and give it the jQuery method fadeOut() which will, you guessed it, fade the element out.
I call the fadeOut() method after the site has fully loaded using the window on load jQuery event.
That’s it, a few lines of code to improve the UX of your site. Full code here.