<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=299788&amp;fmt=gif">

Quick and Easy Page Loading Overlay with Spinner - Part 1

User Experience, Software Solutions

By David Wierbiki

Easy Page Loading Overlay With Spinner

Page loading overlays are a dime a dozen. What I'm presenting isn't anything new, just the quickest and easiest way to get you through in a pinch.

While working under a tight deadline recently, there wasn't an opportunity to rewrite things to remedy the situation. And while I didn't have an actual FOUC taking place (you could easily use this for a bonafide FOUC), I still had a slow loading page that caused some of the elements to not load correctly. This presented the end user with a flash of wrongly styled content. I only needed to buy myself a second or two, but I couldn't just leave the end user with a blank screen or jumbled UI, causing them to be uncertain of what was taking place. Typically page loading overlays are used to ensure the end user is not left hanging.


The particulars of my needs were fairly specific. I had a difficult, outdated and un-flexible templating system to work with that did not allow for a preferred more technical solution. I needed to ensure the overlay loaded first. Once the page was loaded, the loader would be dismissed.


There are two pieces to this implementation and the below allows you to simply copy/paste into your solution.

The HTML/CSS

This assumes you have jQuery already being loaded in the HTML header.


script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Throw this code right after the body tag:

<style>
#overlay {
background: #ffffff;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
}
</style>
<div id="overlay">
<img src="loader.gif" alt="Loading" /><br/>
Loading...
</div> 

I used this animated gif in my loader:
Loader Animated Gif

 

The JavaScript

Then use the below to close the loader overlay. I placed this at the very bottom of the page just before the body closing tag as there were still additional scripts and elements being loaded there as well. The .fadeOut() jQuery function removes the targeted ID'd element.


<script>
jQuery(window).load(function(){
jQuery('#overlay').fadeOut();
});
</script>

 

Conclusion

While not my preferred solution for a loader overlay, this served my purposes and saved the end user's experience quickly and easily. Part II of this post I will add in a CSS animated spinner instead of an animated gif.

Managing JIRA at Scale White Paper

TAGS: User Experience, Software Solutions

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Subscribe to Our Newsletter

Recent Blog Posts