<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();



      });