A CodePen by Ben Parker. Loading dots - Playing around with flashing dots

index.html

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

style.scss

@import "compass";
$on: black;
$off: #CCC;

@keyframes dots {
  from {
    background: $on;
  }
  to {
    background: $off;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.dot {
  height: 8px;
  width: 8px;
  border-radius: 12px;
  background: $on;
}

.loading {
  animation: rotate 3s infinite linear,
    dots 2000ms infinite;
  display: inline-block;
  position: relative;
  
  &:before, &:after {
    @extend .dot;
    animation: dots 2000ms 1000ms infinite;
    position: absolute;
    content: '';
    left: 16px;
    background: $off;
  }

  &:before {
    top: 16px;
    left: 8px;
    animation-delay: 1500ms;    
  }
}

/** Display sugar **/
body {
  width: 100px;
  margin: 50px auto;
}