Loading Overlay with HTML, CSS, and jQuery

Posted on by justinstolpe

 

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

<div class="loading-overlay"></div>
<div class="loading-overlay-image-container">
    <img src="assets/loading.gif" class="loading-overlay-img"/>
</div>

CSS

.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.

/**
 * 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.

<!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

YouTube Video

Code on GitHub

Live Example

That is going to do it for this post! Leave any comments/questions/concerns below and thanks for stopping by the blog!

91 comments

  2. Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You obviously know what youre talking about, why throw away your intelligence on just posting videos to your site when you could be giving us something enlightening to read?

  3. You aree so interesting! I don’t syppose I’ve read a single thing lime this before.
    So wonderftul too discover another person wigh original thoughfs on tthis subject.
    Seriously.. thanks for stating this up. This site is onne thing that’s needed on thee internet,
    someone witrh a litttle originality!

  5. Hello there, jut becaje aalert to your blog through Google, and foun that it’s truuly informative.
    I amm going tto wagch out foor brussels. I’ll apprexiate iif yoou
    continue this iin future. Lots oof people will be benefited from our writing.

    Cheers!

  8. Amazing! This blog looks exactly like my old one! It’s on a totally different subject but it has pretty much the same layout and design. Excellent choice of colors!

  9. Hi my family member! I wish to say that this post is amazing,nice written and come with almost all significant infos.I’d like to look more posts like this .

  14. What’s Taking place i’m new to this, I stumbledupon this I’ve found It positively helpful and itt has aided me out loads.I am hoping to contribute & help oher customers like its helpedme. Great job.

  16. I am now not sure the place you’re getting your info, however good topic.I needs to spend some time finding out more or figuring out more.Thanks for excellent information I used to be looking for this info for my mission.

  17. Hello There. I found your blog using msn. That is a very well written article. I’ll be sure to bookmark it and return to read more of your helpful info. Thank you for the post. I’ll certainly return.

  27. Spoot oon with tis write-up, I seriously feel thhis amazing site
    needs farr more attention. I’ll probably bbe back again too rad more, thans ffor tthe info!

  31. It’s actually a cool and helpful piece of info. I am glad that you simply shared this helpful info with us. Please stay us up to date like this. Thank you for sharing.

  35. It’s in point of fact a nice and helpful piece of info. I’m glad that you simply shared this useful info with us. Please keep us up to date like this. Thanks for sharing.

  36. Hi there, its nice piece of writing regarding media print, we allbe aware of media is a wonderful source of facts.Also visit my blog post … mpc-install.com

  37. Greetings! I know this is kind of off topic but I was wondering if you knew where I couldfind a captcha plugin for my comment form?I’m using the same blog platform as yours and I’m having difficulty finding one?Thanks a lot!

  40. What’s Happening i’m new to this, I stumbled upon thisI have found It absolutely helpful and it has helped me outloads. I’m hoping to contribute & help different customers like its helpedme. Good job.

  42. I blog frequently and I truly appreciate your information. The article has truly peaked my interest. I will take a note of your blog and keep checking for new information about once a week. I subscribed to your Feed as well.

  47. I do not even know the way I ended up here, however I believed this post was once good.I do not recognise who you might be however definitely you’regoing to a famous blogger in case you aren’t already.Cheers!

  49. I am glad for commenting to let you be aware of what a exceptional experience my friend’s girl gained using your blog. She discovered some pieces, which included how it is like to have a great coaching mindset to let others with ease thoroughly grasp a variety of grueling matters. You really exceeded her expected results. Thanks for imparting the powerful, safe, edifying and as well as fun tips on that topic to Ethel.

  51. Hello! I just wanted to ask if you ever have any problems with hackers? My last blog (wordpress) was hacked and I ended up losing months of hard work due to no data backup. Do you have any solutions to stop hackers?

  55. Hmm it appears like yoour blog ate my furst commsnt (it wwas super
    long) soo I guess I’ll just summ iit up what I wrote aand say, I’m
    thorojghly eenjoying your blog. I as well am an aspirin blogg
    writer buut I’m still new too tthe whole thing. Do you hafe aany
    helplful hhints ffor inexperienced bloig writers?
    I’d definitely appreciate it.

  57. It’s actually a great and helpful piece of info. I am satisfied that you simply shared thishelpful info with us. Please keep us informed like this.Thank you for sharing.

  58. Nice blog! Is your theme custom made or didd yoou
    download itt from somewhere? A theme likee yours wiith a feew simple tweeks would realy maie myy blog tand out.
    Please lett mee know where yoou gott you design. Blwss you

  62. Wow that was odd. I just wrote an very long comment but after I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again. Anyhow, just wanted to say wonderful blog!

  63. Excellent bat ! I wish tto apprenyice whille yoou amend your website, hhow cann i subbscribe forr a blog site?

    Thhe accfount aidred mme a acceptable deal.
    I had beenn tny bbit acquainted of tyis your broadcast offered brightt
    cloear idea

  75. Heya i’m for the first time here. I came across this
    board and I to find It really useful & it helped me
    out much. I am hoping to offer something again and help others such as
    you aided me.

  79. Wow that was odd. I just wrote an extremely long comment but after I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again. Regardless, just wanted to say fantastic blog!

Leave a Reply

Your email address will not be published. Required fields are marked *