A Pen by Chris Simpkins.

Dot-loading.markdown

Dot loading

Infinite cycle from the Sweetmeat footer.

A Pen by Chris Simpkins on CodePen.

License.

index.html

<div class="wrapper">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

style.scss

@import "compass";
body {background:#FFF;}

.wrapper {
  position:relative;
  width :90px;
  height:50px;
  left:calc(50% - 50px);
  top :80px;
}

.dot {
  position:absolute;
  width :10px;
  height:10px;
  border-radius:50%;
}

@for $i from 1 through 16 {
  .dot:nth-child(#{$i}) {
      animation:load 1.6s linear infinite;
      animation-delay:($i*0.1) + s;
      -webkit-animation: load 1.6s linear infinite;
      -webkit-animation-delay: ($i*0.1) + s;
  }
    @keyframes load {
      5% {background:#333;}
    }
    @-webkit-keyframes load {
      5% {background:#333;}
    }
}

.dot:nth-child(1)  {top:20px; left:   0;}
.dot:nth-child(2)  {top:10px; left:10px;}
.dot:nth-child(3)  {top:   0; left:20px;}
.dot:nth-child(4)  {top:10px; left:30px;}
.dot:nth-child(5)  {top:20px; left:40px;}
.dot:nth-child(6)  {top:30px; left:50px;}
.dot:nth-child(7)  {top:40px; left:60px;}
.dot:nth-child(8)  {top:30px; left:70px;}
.dot:nth-child(9)  {top:20px; left:80px;}
.dot:nth-child(10) {top:10px; left:70px;}
.dot:nth-child(11) {top:   0; left:60px;}
.dot:nth-child(12) {top:10px; left:50px;}
.dot:nth-child(13) {top:20px; left:40px;}
.dot:nth-child(14) {top:30px; left:30px;}
.dot:nth-child(15) {top:40px; left:20px;}
.dot:nth-child(16) {top:30px; left:10px;}