Loading dots

index.html

<div class="loading-dots">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

main.css

.loading-dots {
  max-width: 150px;
  margin: auto;
  padding: 15px 0;
  text-align: center;
}

.loading-dots span {
  background: rgba(0, 148, 217, .2);
  border-radius: 50%;
  display: inline-block;
  margin: 0 10px;
  height: 10px;
  width: 10px;
  -webkit-animation: loading_dots 1s linear infinite;
     -moz-animation: loading_dots 1s linear infinite;
       -o-animation: loading_dots 1s linear infinite;
          animation: loading_dots 1s linear infinite;
}

.loading-dots span:nth-child(2) {
  -webkit-animation-delay: .25s;
     -moz-animation-delay: .25s;
          animation-delay: .25s;
}

.loading-dots span:nth-child(3) {
  -webkit-animation-delay: .5s;
     -moz-animation-delay: .5s;
          animation-delay: .5s;
}

.loading-dots span:nth-child(4) {
  -webkit-animation-delay: .75s;
     -moz-animation-delay: .75s;
          animation-delay: .75s;
}

@-o-keyframes loading_dots {
  0%, 100% {
    background: #0094d9;
  }

  75% {
    background: rgba(0, 148, 217, .2);
  }
}

@-moz-keyframes loading_dots {
  0%, 100% {
    background: #0094d9;
  }

  75% {
    background: rgba(0, 148, 217, .2);
  }
}

@-webkit-keyframes loading_dots {
  0%, 100% {
    background: #0094d9;
  }

  75% {
    background: rgba(0, 148, 217, .2);
  }
}

@keyframes loading_dots {
  0%, 100% {
    background: #0094d9;
  }

  75% {
    background: rgba(0, 148, 217, .2);
  }
}