Create Google Like Loading Indicator Using jQuery and CSS

Google updated the loading indicator long time. I noticed a plugin that creates Google like loading indicator back but still you cannot find a good full length tutorial to create it from the scratch. So I have decided to post a tutorial that shows how to create Google loader using jQuery and CSS.

create-google-loading-indicator

Basic HTML


Google Like Loading Indicator<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>

<div id="container">
<div id="googleLoad">
<div class="one"></div>
<div class="two"></div>
</div>
<p class="text">Opening...</p>

</div>

We have a div with the id “googleLoad” which has two inner divs with the class names “one” and “two“. And some text inside of a paragraph tag.

jQuery


	$(document).ready(function () {
		//initiate the function
		googleLoad(1);
	});

	function googleLoad(n){

			if(n==1){
			var p = 4;
			}else{
			var p = Number(n)-1;
			}
			//removing previously added classes
			$("#googleLoad").removeClass("flip"+p).removeClass("active"+p).removeClass("normal"+p);

			//adding classes
			$("#googleLoad").addClass("normal"+n).addClass("active"+n);

			setTimeout(function(){
			       $("#googleLoad").addClass("flip"+n);
			}, 20);
			//recurse the function with increased value
			setTimeout(function(){
			 	if(n<4){
			       		googleLoad(n+1);
			 	}else{
			 		googleLoad(1);
			 	}
			}, 700);
		}

First we are initiating a function called googleLoad() inside of $(document).ready() function.

Basically, we need to loop the function for four times in order to flip the circle strips. Every time we re-loop the function, we need to increase argument value when it is goes more than 4 we need to re-initialize it with 1.

We have three classes .flip, .active, .normal. Basically, normal class is the normal stage and active class will darken the half circle and the flip class will flip the half circle with 3d animation.

We have to add the increased value at the end of the classes and need to add the following css style to make it work.

CSS: Blue to Red


/* Blue to Red */
	#googleLoad{
		border-radius: 50px;
		background: #F90101;
		width: 50px;
		height: 50px;
		margin-left: 5px;
	}
	#googleLoad .one{
	    width: 50px;
	    height: 25px;
	    background: #0266C8;
	    border-radius: 50px 50px 0 0;
	    position: absolute;
	}
	#googleLoad .two{
	    width: 50px;
	    height: 25px;
	    background: #0266C8;
	    border-radius: 0 0 50px 50px;
	    position: absolute;
	    margin-top: 25px;
	}
	#googleLoad.active1 .one{
		background: #0B5BA9;
	}
	#googleLoad.flip1 .one{
		transform: rotateX(180deg);
		margin-top: 25px;
		z-index: 1;
		background: #F90101;
		transition: all 0.7s;
		transform-style: preserve-3d;
	}

Width and height of the half circle can be changed according to your desired size. If you want the circle to be small you can reduce this values. But height should be the half than width. Also the border radius should be the same size as width.

For this tutorial I used transform and transition without browser prefix like -webkit but you can include it according to your need.

CSS: Red to Yellow


	/*Red to Yellow*/
	#googleLoad.normal2{
		background: #F2B50F;
	}
	#googleLoad.normal2 .one{
	    width: 25px;
	    height: 50px;
	    background: #F90101;
	    border-radius: 0 50px 50px 0;
	    margin-left: 25px;
	}
	#googleLoad.normal2 .two{
	    width: 25px;
	    height: 50px;
	    background: #F90101;
	    border-radius: 50px 0 0 50px;
	    margin-top: 0;
	}
	#googleLoad.active2 .one{
		background: #DA1818;
	}
	#googleLoad.flip2 .one{
		transform: rotateY(180deg);
		margin-left: 0;
		z-index: 1;
		background: #F2B50F;
		transition: all 0.7s;
		transform-style: preserve-3d;
	}

Change the background color and direction.

CSS: Yellow to Green

	/*Yellow to Green*/
	#googleLoad.normal3{
		background: #00933B;
	}
	#googleLoad.normal3 .one{
	    width: 50px;
	    height: 25px;
	    background: #F2B50F;
	    border-radius: 0 0 50px 50px;
	    margin-top:25px;
	}
	#googleLoad.normal3 .two{
	    width: 50px;
	    height: 25px;
	    background: #F2B50F;
	    border-radius: 50px 50px 0 0;
	    margin-top: 0;
	}
	#googleLoad.active3 .one{
		background: #E4AA0B;
	}
	#googleLoad.flip3 .one{
		transform: rotateX(180deg);
		margin-top: 0;
		z-index: 1;
		background: #00933B;
		transition: all 0.7s;
		transform-style: preserve-3d;
	}

CSS: Green to Blue

	/*Green to Blue*/
	#googleLoad.normal4{
		background: #0266C8;
	}
	#googleLoad.normal4 .one{
	    width: 25px;
	    height: 50px;
	    background: #00933B;
	    border-radius: 50px 0 0 50px;
    
	}
	#googleLoad.normal4 .two{
	    width: 25px;
	    height: 50px;
	    background: #00933B;
	    border-radius: 0 50px 50px 0;
	    margin-top: 0;
	    margin-left: 25px;
	}
	#googleLoad.active4 .one{
		background: #038236;
	}
	#googleLoad.flip4 .one{
		transform: rotateY(180deg);
		margin-left: 25px;
		z-index: 1;
		background: #0266C8;
		transition: all 0.7s;
		transform-style: preserve-3d;
	}
	.text{
		color: #B5B3B3;
	}

That’s it. You can show this div whenever you need to indicate the loading. If you want this Google loader as easy including plugin format, let me know in the comment. I will create and post it.


Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

Leave a Reply

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