<p>GMail iPhone App Loading Animation</p>
<div id="loader">
	<div id="left"></div>
	<div id="right"></div>
	<div id="top"></div>
	<div id="bottom"></div>
</div>

	body{
		background-color: #f6f6f6;
	}

	#loader{
		border-radius: 50%;
		height:20px;
		margin:50px auto;
		overflow: hidden;
		position: relative;
		width:20px;
	}

	p{
		background-color: #f6f6f6;
		color: #4d4d4d;
		font:14px "Lucida Sans", Arial, sans-serif;
		font-weight: bold;
		margin:80px auto 0;
		padding: 20px;
		position: relative;
		text-align: center;
		text-shadow:1px 1px 2px rgba(255, 255, 255, 1);
		width: 600px;
	}

	p:after {
	    border-radius: 50%;
	    bottom: 0;
	    box-shadow: 0 0 10px rgba(0, 0, 0, .6);
	    content: "";
	    height: 4px;
	    left: 0;
		position: absolute;
		width: 100%;
	    z-index: -1;
	}

	/* ***** Left ***** */
	#left{
		background-color: #e63f35;
		border-radius: 10px 0 0 10px;
		height: 20px;
		width: 10px;
		position: absolute;
		left:0;
		top:0;
		z-index: 1;
		-webkit-transform-origin: 100% 50%;
		-moz-transform-origin: 100% 50%;
		-ms-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
	}

	/* ***** Right ***** */
	#right{
		background-color: #e63f35;
		border-radius: 0 10px 10px 0;
		height: 20px;
		width: 10px;
		position: absolute;
		right:0;
		top:0;
		z-index: 1;
		-webkit-transform-origin: 0% 50%;
		-moz-transform-origin: 0% 50%;
		-ms-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
	}

	/* ***** Top ***** */
	#top{
		height: 10px;
		width: 20px;
		position: absolute;
		left:0;
		top:0;
		z-index: 0;
		border-radius: 10px 10px 0 0;
	    -webkit-transform-origin: 50% 100%;
	    -moz-transform-origin: 50% 100%;
	    -ms-transform-origin: 50% 100%;
	    transform-origin: 50% 100%;
	}

	/* ***** Bottom ***** */
	#bottom{
		height: 10px;
		width: 20px;
		position: absolute;
		left:0;
		bottom:0;
		z-index: 0;
		border-radius: 0 0 10px 10px;
	    -webkit-transform-origin: 50% 0%;
	    -moz-transform-origin: 50% 0%;
	    -ms-transform-origin: 50% 0%;
	    transform-origin: 50% 0%;
	}


	.yellow{ background-color: #fbd008 !important; }
	.red   { background-color: #e63f35 !important; }
	.green { background-color: #58ba47 !important; }
	.blue  { background-color: #269ad1 !important; }
	.passive {z-index: 0 !important;}


	#right.run{		
		-webkit-animation: rightToLeft .5s linear;
		-moz-animation: rightToLeft .5s linear;
		animation: rightToLeft .5s linear;
		z-index: 1;
	}

	#bottom.run{		
		-webkit-animation: bottomToTop .5s linear;
		-moz-animation: bottomToTop .5s linear;
		animation: bottomToTop .5s linear;
		z-index: 1;
	}

	#left.run{		
		-webkit-animation: leftToRight .5s linear;
		-moz-animation: leftToRight .5s linear;
		animation: leftToRight .5s linear;
		z-index: 2;
	}

	#top.run{		
		-webkit-animation: topToBottom .5s linear;
		-moz-animation: topToBottom .5s linear;
		animation: topToBottom .5s linear;
		z-index: 1;
	}
	

	@-webkit-keyframes rightToLeft {
	    0%   { -webkit-transform: perspective(20px) rotateY(0deg);background-color: #e63f35;}
	    49%  { -webkit-transform: perspective(20px) rotateY(90deg);background-color: #be271e;}
	    50%  { -webkit-transform: perspective(20px) rotateY(90deg);background-color: #dfa51b;}
	    100% { -webkit-transform: perspective(20px) rotateY(180deg);background-color: #fbd008;}
	}


	@-webkit-keyframes bottomToTop {		
	    0%   { -webkit-transform: perspective(48px) rotateX(0deg);background-color: #fbd008;}
	    49%  { -webkit-transform: perspective(48px) rotateX(90deg);background-color: #dfa51b;}
	    50%  { -webkit-transform: perspective(48px) rotateX(90deg);background-color: #339622;}
	    100% { -webkit-transform: perspective(48px) rotateX(180deg);background-color: #58ba47;}
	}


	@-webkit-keyframes leftToRight {
	    0%   { -webkit-transform: perspective(20px) rotateY(0deg);background-color: #58ba47;}
	    49%  { -webkit-transform: perspective(20px) rotateY(-90deg);background-color: #40a62f;}
	    50%  { -webkit-transform: perspective(20px) rotateY(-90deg);background-color: #177aa9;}
	    100% { -webkit-transform: perspective(20px) rotateY(-180deg);background-color: #269ad1;}
	}


	@-webkit-keyframes topToBottom {		
	    0%   { -webkit-transform: perspective(48px) rotateX(0deg);background-color: #269ad1;}
	    49%  { -webkit-transform: perspective(48px) rotateX(-90deg);background-color: #1a87bb;}
	    50%  { -webkit-transform: perspective(48px) rotateX(-90deg);background-color: #be271e;}
	    100% { -webkit-transform: perspective(48px) rotateX(-180deg);background-color: #e63f35;}
	}

	@-moz-keyframes rightToLeft {
	    0%   { -moz-transform: perspective(20px) rotateY(0deg);background-color: #e63f35;}
	    49%  { -moz-transform: perspective(20px) rotateY(90deg);background-color: #be271e;}
	    50%  { -moz-transform: perspective(20px) rotateY(90deg);background-color: #dfa51b;}
	    100% { -moz-transform: perspective(20px) rotateY(180deg);background-color: #fbd008;}
	}


	@-moz-keyframes bottomToTop {		
	    0%   { -moz-transform: perspective(48px) rotateX(0deg);background-color: #fbd008;}
	    49%  { -moz-transform: perspective(48px) rotateX(90deg);background-color: #dfa51b;}
	    50%  { -moz-transform: perspective(48px) rotateX(90deg);background-color: #339622;}
	    100% { -moz-transform: perspective(48px) rotateX(180deg);background-color: #58ba47;}
	}


	@-moz-keyframes leftToRight {
	    0%   { -moz-transform: perspective(20px) rotateY(0deg);background-color: #58ba47;}
	    49%  { -moz-transform: perspective(20px) rotateY(-90deg);background-color: #40a62f;}
	    50%  { -moz-transform: perspective(20px) rotateY(-90deg);background-color: #177aa9;}
	    100% { -moz-transform: perspective(20px) rotateY(-180deg);background-color: #269ad1;}
	}


	@-moz-keyframes topToBottom {		
	    0%   { -moz-transform: perspective(48px) rotateX(0deg);background-color: #269ad1;}
	    49%  { -moz-transform: perspective(48px) rotateX(-90deg);background-color: #1a87bb;}
	    50%  { -moz-transform: perspective(48px) rotateX(-90deg);background-color: #be271e;}
	    100% { -moz-transform: perspective(48px) rotateX(-180deg);background-color: #e63f35;}
	}

	@keyframes rightToLeft {
	    0%   { transform: perspective(20px) rotateY(0deg);background-color: #e63f35;}
	    49%  { transform: perspective(20px) rotateY(90deg);background-color: #be271e;}
	    50%  { transform: perspective(20px) rotateY(90deg);background-color: #dfa51b;}
	    100% { transform: perspective(20px) rotateY(180deg);background-color: #fbd008;}
	}


	@keyframes bottomToTop {		
	    0%   { transform: perspective(48px) rotateX(0deg);background-color: #fbd008;}
	    49%  { transform: perspective(48px) rotateX(90deg);background-color: #dfa51b;}
	    50%  { transform: perspective(48px) rotateX(90deg);background-color: #339622;}
	    100% { transform: perspective(48px) rotateX(180deg);background-color: #58ba47;}
	}


	@keyframes leftToRight {
	    0%   { transform: perspective(20px) rotateY(0deg);background-color: #58ba47;}
	    49%  { transform: perspective(20px) rotateY(-90deg);background-color: #40a62f;}
	    50%  { transform: perspective(20px) rotateY(-90deg);background-color: #177aa9;}
	    100% { transform: perspective(20px) rotateY(-180deg);background-color: #269ad1;}
	}


	@keyframes topToBottom {		
	    0%   { transform: perspective(48px) rotateX(0deg);background-color: #269ad1;}
	    49%  { transform: perspective(48px) rotateX(-90deg);background-color: #1a87bb;}
	    50%  { transform: perspective(48px) rotateX(-90deg);background-color: #be271e;}
	    100% { transform: perspective(48px) rotateX(-180deg);background-color: #e63f35;}
	}

/* ----------------------------

New GMail app for iphone/ipad has a creative loading animation.

I like it very much and i just try to make it. :)

Tested on Win7 with Chrome, Firefox and Safari...

------------------------------- */
$(function(){

				var top    = $("#top"),
					left   = $("#left"),
					right  = $("#right"),
					bottom = $("#bottom");


				function rightToLeft(){
					clear();
					right.addClass("run");
					left.addClass("red");
					bottom.addClass("yellow passive");
					top.addClass("yellow passive");
					var s = setInterval(function(){
						bottomToTop();
						clearInterval(s);
					},500);
				}

				function bottomToTop(){
					clear();
					bottom.addClass("run");
					top.addClass("yellow");
					right.addClass("green passive");
					left.addClass("green passive");
					var s = setInterval(function(){
						leftToRight();
						clearInterval(s);
					},500);
				}

				function leftToRight(){
					clear();
					left.addClass("run");
					right.addClass("green");
					bottom.addClass("blue passive");
					top.addClass("blue passive");
					var s = setInterval(function(){
						topToBottom();
						clearInterval(s);
					},500);
				}

				function topToBottom(){
					clear();
					top.addClass("run");
					bottom.addClass("blue");
					left.addClass("red passive");
					right.addClass("red passive");
					var s = setInterval(function(){
						rightToLeft();
						clearInterval(s);
					},500);
				}

				function clear(){
					top.removeAttr("class");
					right.removeAttr("class");
					bottom.removeAttr("class");
					left.removeAttr("class");
				}

				rightToLeft();



			});