Loading Overlay with HTML, CSS, and jQuery

 

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!