Loading Text | Learning Axis

HTML

CSS

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;
}
.loading div {
  display: inline-block;
  animation-name: flip;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50% 8px;
  transform-style: preserve-3d;
}
.loading .l1 { animation-delay: 0.1s; }
.loading .l2 { animation-delay: 0.2s; }
.loading .l3 { animation-delay: 0.3s; }
.loading .l4 { animation-delay: 0.4s; }
.loading .l5 { animation-delay: 0.5s; }
.loading .l6 { animation-delay: 0.6s; }
.loading .l7 { animation-delay: 0.7s; }
.loading .l8 { animation-delay: 0.8s; }
.loading .l9 { animation-delay: 0.9s; }
.loading .l10 { animation-delay: 1s; }
button {
  display: inline-block;
  margin: 5px;
  padding: 10px 15px;
  font-size: 1em;
  cursor: pointer;
}