<svg enable-background="new 0 0 400 400" height="400px" id="logo" version="1.1" viewBox="0 0 400 400" width="400px" xml:space="preserve"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
      <path d="M142.9,24.2C97.6,39.7,59,73.6,37.5,116.5c-7.5,14.8-12.9,30.5-16.2,46.8c-8.2,40.4-2.5,83.5,16.1,120.3   c12.1,24,29.5,45.4,50.5,62.1c19.9,15.8,43,27.6,67.6,34.1c31,8.3,64,8.1,95.2,1c28.2-6.5,54.9-20,76.2-39.6   c22.5-20.7,38.6-47.9,47.1-77.2c9.3-31.9,10.5-66,4.7-98.8c-58.3,0-116.7,0-175,0c0,24.2,0,48.4,0,72.6c33.8,0,67.6,0,101.4,0   c-3.9,23.2-17.7,44.4-37.2,57.5c-12.3,8.3-26.4,13.6-41,16.2c-14.6,2.5-29.8,2.8-44.4-0.1c-14.9-3-29-9.2-41.4-17.9   c-19.8-13.9-34.9-34.2-42.6-57.1c-7.9-23.3-8-49.2,0-72.4c5.6-16.4,14.8-31.5,27-43.9c15-15.4,34.5-26.4,55.6-30.9   c18-3.8,37-3.1,54.6,2.2c15,4.5,28.8,12.8,40.1,23.6c11.4-11.4,22.8-22.8,34.2-34.2c6-6.1,12.3-12,18.1-18.3   c-17.3-16-37.7-28.9-59.9-37.1C228.2,10.6,183.2,10.3,142.9,24.2z"
        fill="#FFFFFF" />
      <g>
        <path id="logo-color-1" d="M142.9,24.2c40.2-13.9,85.3-13.6,125.3,1.1c22.2,8.2,42.5,21,59.9,37.1c-5.8,6.3-12.1,12.2-18.1,18.3    c-11.4,11.4-22.8,22.8-34.2,34.2c-11.3-10.8-25.1-19-40.1-23.6c-17.6-5.3-36.6-6.1-54.6-2.2c-21,4.5-40.5,15.5-55.6,30.9    c-12.2,12.3-21.4,27.5-27,43.9c-20.3-15.8-40.6-31.5-61-47.3C59,73.6,97.6,39.7,142.9,24.2z"
          fill="#cccccc" />
      </g>
      <g>
        <path id="logo-color-2" d="M21.4,163.2c3.3-16.2,8.7-32,16.2-46.8c20.3,15.8,40.6,31.5,61,47.3c-8,23.3-8,49.2,0,72.4    c-20.3,15.8-40.6,31.6-60.9,47.3C18.9,246.7,13.2,203.6,21.4,163.2z"
          fill="#cecece" />
      </g>
      <g>
        <path id="logo-color-3" d="M203.7,165.1c58.3,0,116.7,0,175,0c5.8,32.7,4.5,66.8-4.7,98.8c-8.5,29.3-24.6,56.5-47.1,77.2    c-19.7-15.3-39.4-30.6-59.1-45.9c19.5-13.1,33.3-34.3,37.2-57.5c-33.8,0-67.6,0-101.4,0C203.7,213.5,203.7,189.3,203.7,165.1z"
          fill="#cdcdcd" />
      </g>
      <g>
        <path id="logo-color-4" d="M37.5,283.5c20.3-15.7,40.6-31.5,60.9-47.3c7.8,22.9,22.8,43.2,42.6,57.1c12.4,8.7,26.6,14.9,41.4,17.9    c14.6,3,29.7,2.6,44.4,0.1c14.6-2.6,28.7-7.9,41-16.2c19.7,15.3,39.4,30.6,59.1,45.9c-21.3,19.7-48,33.1-76.2,39.6    c-31.2,7.1-64.2,7.3-95.2-1c-24.6-6.5-47.7-18.2-67.6-34.1C67,328.9,49.6,307.5,37.5,283.5z"
          fill="#cfcfcf" />
      </g>
    </g>
  </svg>



  <div class="rotating-plane" style=""></div>


  <div class="ing-circle">
    <div class="cle1 cir"></div>
    <div class="cle2 cir"></div>
    <div class="cle3 cir"></div>
    <div class="cle4 cir"></div>
    <div class="cle5 cir"></div>
    <div class="cle6 cir"></div>
    <div class="cle7 cir"></div>
    <div class="cle8 cir"></div>
    <div class="cle9 cir"></div>
    <div class="cle10 cir"></div>
    <div class="cle11 cir"></div>
    <div class="cle12 cir"></div>
  </div>


  <div class="folding-cube">
    <div class="cube1 cube"></div>
    <div class="cube2 cube"></div>
    <div class="cube4 cube"></div>
    <div class="cube3 cube"></div>
  </div>


  <div class="double-bounce">
    <div class="child double-bounce1"></div>
    <div class="child double-bounce2"></div>
  </div>

  <div class="wave">
    <div class="rect rect1"></div>
    <div class="rect rect2"></div>
    <div class="rect rect3"></div>
    <div class="rect rect4"></div>
    <div class="rect rect5"></div>
  </div>

  <div class="wandering-cubes">
    <div class="cube cube1"></div>
    <div class="cube cube2"></div>
  </div>

  <div class="spinner spinner-pulse"></div>

  <div class="chasing-dots">
    <div class="child dot1"></div>
    <div class="child dot2"></div>
  </div>

  <div class="three-bounce">
    <div class="child bounce1"></div>
    <div class="child bounce2"></div>
    <div class="child bounce3"></div>
  </div>

  <div class="circle">
    <div class="circle1 child"></div>
    <div class="circle2 child"></div>
    <div class="circle3 child"></div>
    <div class="circle4 child"></div>
    <div class="circle5 child"></div>
    <div class="circle6 child"></div>
    <div class="circle7 child"></div>
    <div class="circle8 child"></div>
    <div class="circle9 child"></div>
    <div class="circle10 child"></div>
    <div class="circle11 child"></div>
    <div class="circle12 child"></div>
  </div>

  <div class="cube-grid">
    <div class="cube cube1"></div>
    <div class="cube cube2"></div>
    <div class="cube cube3"></div>
    <div class="cube cube4"></div>
    <div class="cube cube5"></div>
    <div class="cube cube6"></div>
    <div class="cube cube7"></div>
    <div class="cube cube8"></div>
    <div class="cube cube9"></div>
  </div>
/*
 *  Usage:
 *
      <div class="rotating-plane"></div>
 *
 */
.rotating-plane {
  width: 60px;
  height: 60px;
  background-color: #4285F4;
  margin: 40px 20px;
  animation: rotatePlane 1.2s infinite ease-in-out;
}

@keyframes rotatePlane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

/*
 *  Usage:
 *
      <div class="double-bounce">
        <div class="child double-bounce1"></div>
        <div class="child double-bounce2"></div>
      </div>
 *
 */
.double-bounce {
  width: 60px;
  height: 60px;
  position: relative;
  margin: 40px 20px;
}

.double-bounce .child {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #4285F4;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: doubleBounce 2.0s infinite ease-in-out;
}

.double-bounce .double-bounce2 {
  animation-delay: -1.0s;
}

@keyframes doubleBounce {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

/*
 *  Usage:
 *
      <div class="wave">
        <div class="rect rect1"></div>
        <div class="rect rect2"></div>
        <div class="rect rect3"></div>
        <div class="rect rect4"></div>
        <div class="rect rect5"></div>
      </div>
 *
 */
.wave {
  margin: 40px 20px;
  width: 75px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}

.wave .rect {
  background-color: #4285F4;
  height: 100%;
  width: 6px;
  display: inline-block;
  animation: waveStretchDelay 1.2s infinite ease-in-out;
}

.wave .rect1 {
  animation-delay: -1.2s;
}

.wave .rect2 {
  animation-delay: -1.1s;
}

.wave .rect3 {
  animation-delay: -1s;
}

.wave .rect4 {
  animation-delay: -0.9s;
}

.wave .rect5 {
  animation-delay: -0.8s;
}

@keyframes waveStretchDelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}

/*
 *  Usage:
 *
      <div class="wandering-cubes">
        <div class="cube cube1"></div>
        <div class="cube cube2"></div>
      </div>
 *
 */
.wandering-cubes {
  margin: 40px 20px;
  width: 60px;
  height: 60px;
  position: relative;
}

.wandering-cubes .cube {
  background-color: #4285F4;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  animation: wanderingCube 1.8s ease-in-out -1.8s infinite both;
}

.wandering-cubes .cube2 {
  animation-delay: -0.9s;
}

@keyframes wanderingCube {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: translateX(30px) rotate(-90deg) scale(0.5);
  }
  50% {
    /* Hack to make FF rotate in the right direction */
    transform: translateX(30px) translateY(30px) rotate(-179deg);
  }
  50.1% {
    transform: translateX(30px) translateY(30px) rotate(-180deg);
  }
  75% {
    transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/*
 *  Usage:
 *
      <div class="spinner spinner-pulse"></div>
 *
 */
.spinner-pulse {
  width: 60px;
  height: 60px;
  margin: 40px 20px;
  background-color: #4285F4;
  border-radius: 100%;
  animation: pulseScaleOut 1.0s infinite ease-in-out;
}

@keyframes pulseScaleOut {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/*
 *  Usage:
 *
      <div class="chasing-dots">
        <div class="child dot1"></div>
        <div class="child dot2"></div>
      </div>
 *
 */
.chasing-dots {
  margin: 40px 20px;
  width: 60px;
  height: 60px;
  position: relative;
  text-align: center;
  animation: chasingDotsRotate 2s infinite linear;
}

.chasing-dots .child {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #4285F4;
  border-radius: 100%;
  animation: chasingDotsBounce 2s infinite ease-in-out;
}

.chasing-dots .dot2 {
  top: auto;
  bottom: 0;
  animation-delay: -1s;
}

@keyframes chasingDotsRotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes chasingDotsBounce {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

/*
 *  Usage:
 *
      <div class="three-bounce">
        <div class="child bounce1"></div>
        <div class="child bounce2"></div>
        <div class="child bounce3"></div>
      </div>
 *
 */
.three-bounce {
  margin: 40px 20px;
  width: 120px;
  text-align: center;
}

.three-bounce .child {
  width: 30px;
  height: 30px;
  background-color: #4285F4;
  border-radius: 100%;
  display: inline-block;
  animation: three-bounce 1.4s ease-in-out 0s infinite both;
}

.three-bounce .bounce1 {
  animation-delay: -0.32s;
}

.three-bounce .bounce2 {
  animation-delay: -0.16s;
}

@keyframes three-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/*
 *  Usage:
 *
      <div class="circle">
        <div class="circle1 child"></div>
        <div class="circle2 child"></div>
        <div class="circle3 child"></div>
        <div class="circle4 child"></div>
        <div class="circle5 child"></div>
        <div class="circle6 child"></div>
        <div class="circle7 child"></div>
        <div class="circle8 child"></div>
        <div class="circle9 child"></div>
        <div class="circle10 child"></div>
        <div class="circle11 child"></div>
        <div class="circle12 child"></div>
      </div>
 *
 */
.circle {
  margin: 40px 20px;
  width: 60px;
  height: 60px;
  position: relative;
}

.circle .child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.circle .child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #4285F4;
  border-radius: 100%;
  animation: circleBounceDelay 1.2s infinite ease-in-out both;
}

.circle .circle2 {
  transform: rotate(30deg);
}

.circle .circle3 {
  transform: rotate(60deg);
}

.circle .circle4 {
  transform: rotate(90deg);
}

.circle .circle5 {
  transform: rotate(120deg);
}

.circle .circle6 {
  transform: rotate(150deg);
}

.circle .circle7 {
  transform: rotate(180deg);
}

.circle .circle8 {
  transform: rotate(210deg);
}

.circle .circle9 {
  transform: rotate(240deg);
}

.circle .circle10 {
  transform: rotate(270deg);
}

.circle .circle11 {
  transform: rotate(300deg);
}

.circle .circle12 {
  transform: rotate(330deg);
}

.circle .circle2:before {
  animation-delay: -1.1s;
}

.circle .circle3:before {
  animation-delay: -1s;
}

.circle .circle4:before {
  animation-delay: -0.9s;
}

.circle .circle5:before {
  animation-delay: -0.8s;
}

.circle .circle6:before {
  animation-delay: -0.7s;
}

.circle .circle7:before {
  animation-delay: -0.6s;
}

.circle .circle8:before {
  animation-delay: -0.5s;
}

.circle .circle9:before {
  animation-delay: -0.4s;
}

.circle .circle10:before {
  animation-delay: -0.3s;
}

.circle .circle11:before {
  animation-delay: -0.2s;
}

.circle .circle12:before {
  animation-delay: -0.1s;
}

@keyframes circleBounceDelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/*
 *  Usage:
 *
      <div class="cube-grid">
        <div class="cube cube1"></div>
        <div class="cube cube2"></div>
        <div class="cube cube3"></div>
        <div class="cube cube4"></div>
        <div class="cube cube5"></div>
        <div class="cube cube6"></div>
        <div class="cube cube7"></div>
        <div class="cube cube8"></div>
        <div class="cube cube9"></div>
      </div>
 *
 */
.cube-grid {
  width: 60px;
  height: 60px;
  margin: 40px 20px;
  /*
   * Spinner positions
   * 1 2 3
   * 4 5 6
   * 7 8 9
   */
}

.cube-grid .cube {
  width: 33.33%;
  height: 33.33%;
  background-color: #4285F4;
  float: left;
  animation: cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.cube-grid .cube1 {
  animation-delay: 0.2s;
}

.cube-grid .cube2 {
  animation-delay: 0.3s;
}

.cube-grid .cube3 {
  animation-delay: 0.4s;
}

.cube-grid .cube4 {
  animation-delay: 0.1s;
}

.cube-grid .cube5 {
  animation-delay: 0.2s;
}

.cube-grid .cube6 {
  animation-delay: 0.3s;
}

.cube-grid .cube7 {
  animation-delay: 0.0s;
}

.cube-grid .cube8 {
  animation-delay: 0.1s;
}

.cube-grid .cube9 {
  animation-delay: 0.2s;
}

@keyframes cubeGridScaleDelay {
  0%, 70%, 100% {
    transform: scale3D(1, 1, 1);
  }
  35% {
    transform: scale3D(0, 0, 1);
  }
}

/*
 *  Usage:
 *
      <div class="fading-circle">
        <div class="circle1 circle"></div>
        <div class="circle2 circle"></div>
        <div class="circle3 circle"></div>
        <div class="circle4 circle"></div>
        <div class="circle5 circle"></div>
        <div class="circle6 circle"></div>
        <div class="circle7 circle"></div>
        <div class="circle8 circle"></div>
        <div class="circle9 circle"></div>
        <div class="circle10 circle"></div>
        <div class="circle11 circle"></div>
        <div class="circle12 circle"></div>
      </div>
 *
 */
.fading-circle {
  margin: 40px 20px;
  width: 60px;
  height: 60px;
  position: relative;
}

.fading-circle .circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.fading-circle .circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #4285F4;
  border-radius: 100%;
  animation: circleFadeDelay 1.2s infinite ease-in-out both;
}

.fading-circle .circle2 {
  transform: rotate(30deg);
}

.fading-circle .circle3 {
  transform: rotate(60deg);
}

.fading-circle .circle4 {
  transform: rotate(90deg);
}

.fading-circle .circle5 {
  transform: rotate(120deg);
}

.fading-circle .circle6 {
  transform: rotate(150deg);
}

.fading-circle .circle7 {
  transform: rotate(180deg);
}

.fading-circle .circle8 {
  transform: rotate(210deg);
}

.fading-circle .circle9 {
  transform: rotate(240deg);
}

.fading-circle .circle10 {
  transform: rotate(270deg);
}

.fading-circle .circle11 {
  transform: rotate(300deg);
}

.fading-circle .circle12 {
  transform: rotate(330deg);
}

.fading-circle .circle2:before {
  animation-delay: -1.1s;
}

.fading-circle .circle3:before {
  animation-delay: -1s;
}

.fading-circle .circle4:before {
  animation-delay: -0.9s;
}

.fading-circle .circle5:before {
  animation-delay: -0.8s;
}

.fading-circle .circle6:before {
  animation-delay: -0.7s;
}

.fading-circle .circle7:before {
  animation-delay: -0.6s;
}

.fading-circle .circle8:before {
  animation-delay: -0.5s;
}

.fading-circle .circle9:before {
  animation-delay: -0.4s;
}

.fading-circle .circle10:before {
  animation-delay: -0.3s;
}

.fading-circle .circle11:before {
  animation-delay: -0.2s;
}

.fading-circle .circle12:before {
  animation-delay: -0.1s;
}

@keyframes circleFadeDelay {
  0%, 39%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

/*
 *  Usage:
 *
      <div class="folding-cube">
        <div class="cube1 cube"></div>
        <div class="cube2 cube"></div>
        <div class="cube4 cube"></div>
        <div class="cube3 cube"></div>
      </div>
 *
 */
.folding-cube {
  margin: 40px 20px;
  width: 60px;
  height: 60px;
  position: relative;
  transform: rotateZ(45deg);
}

.folding-cube .cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  transform: scale(1.1);
}

.folding-cube .cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #4285F4;
  animation: foldCubeAngle 2.4s infinite linear both;
  transform-origin: 100% 100%;
}

.folding-cube .cube2 {
  transform: scale(1.1) rotateZ(90deg);
}

.folding-cube .cube3 {
  transform: scale(1.1) rotateZ(180deg);
}

.folding-cube .cube4 {
  transform: scale(1.1) rotateZ(270deg);
}

.folding-cube .cube2:before {
  animation-delay: 0.3s;
}

.folding-cube .cube3:before {
  animation-delay: 0.6s;
}

.folding-cube .cube4:before {
  animation-delay: 0.9s;
}

@keyframes foldCubeAngle {
  0%, 10% {
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%, 75% {
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%, 100% {
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

#logo {
  width: 60px;
  height: 60px;
  margin: 40px 20px;
  fill: #ccc;
  stroke: #666;
  stroke-miterlimit: 5;
  animation-name: DrawLine;
  animation-duration: 4s, 1s, 1s;
  animation-delay: 0, 3.5s, 3.5s;
}

#logo-color-1 {
  fill: #EA4335;
  fill-opacity: 0;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: FillIn;
  animation-duration: 4s, 1s, 1s;
  animation-delay: 0, 3.5s, 3.5s;
}

#logo-color-2 {
  fill: #FBBC05;
  fill-opacity: 0;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: FillIn;
  animation-duration: 4s, 1s, 1s;
  animation-delay: 0, 3.5s, 3.5s;
}

#logo-color-3 {
  fill: #4285F4;
  fill-opacity: 0;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: FillIn;
  animation-duration: 4s, 1s, 1s;
  animation-delay: 0, 3.5s, 3.5s;
}

#logo-color-4 {
  fill: #34A853;
  fill-opacity: 0;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: FillIn;
  animation-duration: 4s, 1s, 1s;
  animation-delay: 0, 3.5s, 3.5s;
}

@keyframes DrawLine {
  to {
    stroke-dashOffset: 0;
  }
}

@keyframes FadeStroke {
  to {
    stroke-opacity: 0;
  }
}

@keyframes FillIn {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-polyfills.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js
  3. https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/Rx.umd.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-all.umd.min.js