In this post we create a global loading overlay using HTML, CSS, and jQuery. There is one line of code to take over the screen and display a loader as well as one line of code to hide the loader. This loader is good for any button such as signing up, logging in, downloading files, and any other action that would require a loader to be displayed.
Step 1: HTML and CSS
The HTML/CSS for the loader is simple. It consists of two divs and a loading gif image. When the page loads, both divs are set to display none. Only when we have an action which requires the loader, do we actually want to show the loader.
The first div, with a class “loading-overlay” is going to be our overlay. This will covers the entire screen. It gets a background of black with some opacity. This way we can see through to our website behind the overlay but we can’t interact with it at all because our overlay has take over. Position fixed and height/width at 100% will make sure the overlay covers the entire browser window.
The second div, with a class of “loading-overlay-image-container”, contains our loading gif image. This will sit on top of our “loading-overlay” div and be centered in the browser. Position fixed with top and left at 50% will get our image container centered in the browser.
HTML
|
1 2 3 4 |
<div class="loading-overlay"></div> <div class="loading-overlay-image-container"> <img src="assets/loading.gif" class="loading-overlay-img"/> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.loading-overlay { display: none; background: rgba( 26, 26, 26, 0.7 ); position: fixed; width: 100%; height: 100%; z-index: 5; top: 0; } .loading-overlay-image-container { display: none; position: fixed; z-index: 7; top: 50%; left: 50%; transform: translate( -50%, -50% ); } .loading-overlay-img { width: 50px; height: 50px; border-radius: 5px; } |
Step 2: JavaScript/jQuery
Now that we have our HTML and CSS, we need to create a few JavaScript function to actually show and hide our loader. We are going to take it one step further and also have the HTML written out to the page with JavaScript/jQuery on page load! To do this we are going to create an object with three functions.
initialize function
This function will write out our HTML to the body of our page. Call this function when the document is ready and the HTML gets appended to the body of our page. The loader is now ready to be used!
showLoader function
This function displays our loader on the page by changing the display none on both our divs, to display block.
hideLoader function
This function hides our loader on the page by changing the display block on both of our divs, to display none.
Here is what the finished loader object looks like.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
/** * Handle loading overlays * * @author Justin Stolpe */ var loader = { /** * Initialize our loading overlays for use * * @params void * * @return void */ initialize : function () { var html = '<div class="loading-overlay"></div>' + '<div class="loading-overlay-image-container">' + '<img src="assets/loading.gif" class="loading-overlay-img"/>' + '</div>'; // append our html to the DOM body $( 'body' ).append( html ); }, /** * Show the loading overlay * * @params void * * @return void */ showLoader : function () { jQuery( '.loading-overlay' ).show(); jQuery( '.loading-overlay-image-container' ).show(); }, /** * Hide the loading overlay * * @params void * * @return void */ hideLoader : function () { jQuery( '.loading-overlay' ).hide(); jQuery( '.loading-overlay-image-container' ).hide(); } } |
Step 3: Putting it all Together
We have everything we need now for displaying a loader on our website. It is also easy to manage because everything is in our loader object. If we every need to update the loader, we simply update the loader object and the loader is update across our site!
Here is an example of calling our loader. On page load we initialize the loader so it is ready for use. When the “Test” link gets clicked, we call show loader which will show our loader. After a few seconds, we call our hide loader function which hides the loader returning it to the state is was in on page load.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <!-- include loader styles --> <link href="css/global.css" rel="stylesheet" type="text/css"> <!-- include our loader overlay script --> <script type="text/javascript" src="js/loader.js"></script> <script> $( function() { // do things when the document is ready // initialize our loader overlay loader.initialize(); $( '#load_test' ).on( 'click', function() { // on click for our load test link // show our loading overlay loader.showLoader(); setInterval( function() { // after 3 seconds, hide our loading overlay loader.hideLoader(); }, 3000 ); } ); } ); </script> </head> <body> <span id="load_test">Loading Overlay Test (lasts 3 sec)</span> </body> </html> |
Links
That is going to do it for this post! Leave any comments/questions/concerns below and thanks for stopping by the blog!
Thank you very much Justin, it works perfect!
Thanks, works like a charm.
I changed the setInterval method to setTimeout because it would cancel my loading overlay animation early if I activated it multiple times.
BR Lukas
I love how it’s programmed, it’s very aesthetic and simple. Thanks!.
Hmm is anyone else encountering problems with the pictures on this blog loading?
I’m trying to figure out if its a problem on my end or if it’s the blog.
Any feed-back would be greatly appreciated.
All the images? The images are loading fine and I have tested it from multiple places.