Google Gmail Loading CSS Animation

Only CSS Animations

by rgthree

HTML

<ul class="loader">
  <li class=":before"></li>
  <li class=":after"></li>
  <li class="child"></li>
</ul>

CSS

.loader {
  position:relative;
  width:50px; height:50px;
  margin:10px;
}

.loader > * {
  content:' ';
  display:block; width:50%; height:100%;
  position:absolute; top:0px; left:0px; z-index:1;
  background:#21aa29;
  border-radius:25px 0px 0px 25px;
}

.loader > .\:after {
  left:auto; right:0px;
  border-radius:0px 25px 25px 0px;
}

.loader > .child {
  top:0px; left:auto; right:0px; z-index:3;
  border-radius:0px 25px 25px 0px;
  -webkit-transform-style:preserve-3d;
  -webkit-transform-origin:0px 50%;
}

.loader,
.loader > .\:before,
.loader > .\:after,
.loader > .child {
  -webkit-animation:rotate 4s linear 0s infinite normal;
}
.loader > .\:before {
  -webkit-animation-name:left;
}
.loader > .\:after {
  -webkit-animation-name:right;
}
.loader > .child {
  -webkit-animation-name:child;
}

/*
  Google Colors:
  Green:  #21aa29 / #105514
  Blue:   #2159d6 / #102c6b
  Red:    #d62408 / #6b1204
  Yellow: #ffcf00 / #7f6700
*/

@-webkit-keyframes child {
  0% {
    background-color:#21aa29;
    -webkit-transform:rotateY(0deg);
  }
  9.9%{
    background-color:#105514;
  }
  10% {
    background-color:#102c6b;
  }
  20%,24.9% {
    background-color:#2159d6;
    -webkit-transform:rotateY(-180deg);
  }
  25% {
    background-color:#2159d6;
    -webkit-transform:rotateY(0deg);
  }
  34.9%{
    background-color:#102c6b;
  }
  35%{
    background-color:#6b1204;
  }
  45%,49.9% {
    background-color:#d62408;
    -webkit-transform:rotateY(-180deg);
  }
  50% {
    background-color:#d62408;
    -webkit-transform:rotateY(0deg);
  }
  59.9%{
    background-color:#6b1204;
  }
  60%{
    background-color:#7f6700;
  }
  70%,74.9% {
    background-color:#ffcf00;
    -webkit-transform:rotateY(-180deg);
  }
  75% {
    background-color:#ffcf00;
    -webkit-transform:rotateY(0deg);
  }
  84.9%{
    background-color:#7f6700;
  }
  85%{
    background-color:#105514;
  }
  95%,99.9% {
    background-color:#21aa29;
    -webkit-transform:rotateY(-180deg);
  }
}

/* Starts at green...