Transparent Please Wait Screen with Animation

Some times we all need to load a page with a huge amount of data's or images. A Please Wait Screen is appropriate for these situations. It helps to improve the look and feel of the applications. In this tutorial, I will show how to create a Transparent Please Wait Screen with Animation using jQuery and CSS3 Animation Properties. I will be using some Bootstrap for styling purpose of this demo page but it is completely optional.

Let's Start Coding

The CSS code for Transparent Please Wait Screen with Animation is given below.

   .plswait_overlay{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.35);
		color:white;
		line-height: 700px;
		position: absolute;
		top:0;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		z-index: 1000000;
	}
	
	.dots span {
		animation: dots-1 1s infinite steps(1);
		-webkit-animation: dots-1 1s infinite steps(1);
	}
	.dots span:first-child + span {
		animation-name: dots-2;
		-webkit-animation-name: dots-2;
	}
	
	.dots span:last-child + span {
		animation-name: dots-3;
		-webkit-animation-name: dots-3;
	}

	 /* Loading text animation */
	@keyframes dots-1 { 0% { opacity: 0; } 25% { opacity: 1; } }
	@keyframes dots-2 { 0% { opacity: 0; } 50% { opacity: 1; } }
	@keyframes dots-3 { 0% { opacity: 0; } 75% { opacity: 1; } }
	@-webkit-keyframes dots-1 { 0% { opacity: 0; } 25% { opacity: 1; } }
	@-webkit-keyframes dots-2 { 0% { opacity: 0; } 50% { opacity: 1; } }
	@-webkit-keyframes dots-3 { 0% { opacity: 0; } 75% { opacity: 1; } }

The plswait_overlay is used just to create a transparent div container with full width and height. Its position is set to absolute so that it will float above the body container with position relative property. The span tag with class dots is used to create some small animation effect using CSS3 animation property.

The animation property in CSS can be used to animate many other CSS properties such as colour, background-color, height, or width. The concept is fairly simple.

First, Name the animation
Then Define the movement in @keyframes
Then Call that Animation on an Element.

Note: Always specify the animation-duration property, otherwise the duration is 0, and will never be played.

The syntax of is given below

-webkit-animation: animation-name duration animation-iteration-count  steps() function; /* Safari 4.0 - 8.0 */
 
animation: animation-name duration animation-iteration-count  steps() function;

The @keyframes rule specifies the animation code. Specify when the style change will happen in percent or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

Note: Using the steps() function you can force the interpolation to be an exact number of keyframes.

@keyframes dots-1 { 
  /* You could think of as "step 1" */
    0% { 
        opacity: 0; 
    } 
  /* You could think of as "step 2" */
    25% { 
        opacity: 1; 
    } 
}

Now let's see javascript codes used in this demo application.

    function plsWaitDiv(selector, visibility) {
        if ('show' == visibility) {
            $(selector).css('position', 'relative');
            $(selector).append('<div  class="plswait_overlay">Please wait<span class="dots"><span>.</span><span>.</span><span>.</span></span></div>');
        } else {
            $(selector).css('position', 'static');
            $('.plswait_overlay').remove();
        }
    }

	plsWaitDiv('body', 'show');    
	
	setTimeout(function(){ // To remove please with screen after 5 secounds
        plsWaitDiv('body', 'hidden');    
	},5000);

Initially, When the page is loaded plsWaitDiv() method is called with visibility show which in turn append the plswait_overlay container to the body tag. After 5 seconds the plsWaitDiv() method is called with visibility hidden which in turn remove plswait_overlay container from the body tag.

Now let's see the complete code for our demo HTML page. I used some CSS and Bootstrap for styling and making basic layouts.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Animated Transparent Please Wait Screen</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
	<style>

	<!-- Refer above CSS Code -->
	
	.with_border {
		border: 1px solid rgba(0, 0, 0, 0.1);
		padding : 20px;
		margin : 10px;
	}
	
	</style
</head>
<body>

	<div class="container">

		<p>&nbsp;</p>
		<h2 class="text-center" style="font-weight:bold;color:#7c4dff;">Animated Transparent Please Wait Screen - Demo</h2>
		<p>&nbsp;</p>
		<div class="row">
			<div class="col-md-2 col-md-offset-5">
				<button class="btn btn-default btn-block" onclick="window.location.reload()"><b>REFRESH</b></button>
			</div>
		</div>
		<p>&nbsp;</p>
			<div class="row">
				<div class="col-md-4">
					<div class="with_border">
						<img src="sample1.jpg" class="img-responsive" > 
					</div>	
				</div>
				<div class="col-md-4">
					<div class="with_border">
						<img src="sample2.png" class="img-responsive" > 
					</div>	
				</div>
				<div class="col-md-4">
					<div class="with_border">
						<img src="sample3.jpg" class="img-responsive" > 
					</div>	
				</div>
				
			</div>
			<p>&nbsp;</p>
			<div class="row">
				<div class="col-md-4">
					<div class="with_border">
						<img src="sample4.jpg" class="img-responsive" > 
					</div>	
				</div>
				<div class="col-md-4">
					<div class="with_border">
						<img src="sample5.jpg" class="img-responsive" > 
					</div>	
				</div>
				<div class="col-md-4">
					<div class="with_border">
						<img src="sample6.jpg" class="img-responsive" > 
					</div>	
				</div>
			</div>
		
	</div>
	
	<script>
	<!-- Refer above js COde -->
	</script>
		
</body>
</html>

The output image of above program is given below.

please with screen demo