A Pen by Diego Gurgel.

index.html

<div class="host">
  <div class="loading loading-0"></div>
  <div class="loading loading-1"></div>
  <div class="loading loading-2"></div>
</div>

loading-dots.markdown

loading dots

Pure css bullets loading

A Pen by Diego Gurgel on CodePen.

License.

style.css

.host{
  background:#FFF;
  width:50px;
  height:800px;
  margin: auto;
  padding-top:40px;

}
.loading{
  width:10px;
  height:10px;
  background:#FFF;
  border-radius:100%;
  float:left;
  margin-right:5px;
}
.loading-0{
    -webkit-animation:bounce 1s infinite;
    -webkit-animation-delay:.1s;
    background:#009DC6
  
}
.loading-1{
    -webkit-animation:bounce 1s infinite;
    -webkit-animation-delay:.3s;
    background:#e8b440;
}
.loading-2{
    -webkit-animation:bounce 1s infinite ease;
    -webkit-animation-delay:.5s;
    background:#b62327;
}
@-webkit-keyframes bounce {
  0%, 100% {

    opacity:1;
  }
  60% {
    opacity:.0;
  }
}