<div class="loading">
  <div class="l1">L</div>
  <div class="l2">o</div>
  <div class="l3">a</div>
  <div class="l4">d</div>
  <div class="l5">i</div>
  <div class="l6">n</div>
  <div class="l7">g</div>
  <div class="l8">.</div>
  <div class="l9">.</div>
  <div class="l10">.</div>
</div>
<div class="buttons">
  <button class="flip">Flip</button>
  <button class="jump">Jump</button>
  <button class="rotate">Rotate</button>
  <button class="color">Color</button>
</div>

body {
  background: black;
  color: white;
  font-family: "Droid Sans";
}

@keyframes flip {
  0% {
    transform: rotateX(0deg);
  }
  30% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

@keyframes jump {
  0% {
    transform: translateY(0px);
  }
  5% {
    transform: translateY(-10px);
  }
  10% {
    transform: translateY(0px);
  }
}

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

@keyframes color {
  from {
    color: white;
  }
  to {
    color: red;
  }
}


.loading {
  font-size: 1.5em;
  width: 170px;
  margin: 60px auto;
  perspective: 90px;
  div {
    display: inline-block;
    animation-name: flip;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50% 8px;
    transform-style: preserve-3d;
  }
  $a: 1;
  @while $a < 11 {
    .l#{$a} {
      animation-delay: #{(1/10) * $a}s;
      $a: $a + 1;
    }
  }
}

button {
  display: inline-block;
  
}

$(".flip").click(function() {
  $(".loading>div")
    .css({
      "animation-name": "flip",
      "transform-origin": "50% 50% 8px"
     })
})

$(".jump").click(function() {
  $(".loading>div")
    .css("animation-name", "jump")
})

$(".rotate").click(function() {
  $(".loading>div")
    .css({
      "animation-name": "rotate",
      "transform-origin": "50%"
    })
})

$(".color").click(function() {
  $(".loading>div")
    .css({
      "animation-name": "color",
    })
})