Dot Loading Indicator

dot-loading-indicator.markdown

Dot Loading Indicator

Simple CSS only loading indicator with dots.

A Pen by Mourad Hamoud on CodePen.

License.

index.html

<div class="container">
  <div class="loader">
    <span class="dot dot_1"></span>
    <span class="dot dot_2"></span>
    <span class="dot dot_3"></span>
  </div>
</div>

style.less

html, body {
  width: 100%;
  margin: 20px 0;
  padding:0;
}

.container {
  width: 100%;
  text-align: center;
  
  &::before {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }
}


@dotSize: 10px;
@animationSpeed: 2s;

.loader {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  width: @dotSize * 4;
  height: @dotSize;
  // background-color: red;
}

.dot {
  display: block;
  position: absolute;
  width: @dotSize;
  height: @dotSize;
  border-radius: @dotSize;
  background-color: #888;
  top: 0;

  &.dot_1 {
    left: @dotSize * 0;
    animation: dot_1_Anim @animationSpeed linear infinite;
    // animation-delay: 2s;
  }
  
  &.dot_2 {
    left: @dotSize * 1;
    animation: dot_2_Anim @animationSpeed linear infinite;
  }
  
  &.dot_3 {
    left: @dotSize * 2;
    animation: dot_3_Anim @animationSpeed linear infinite;
  }
}

@keyframes dot_1_Anim {
  0% { left: @dotSize * 0; }
  33.33% { left: @dotSize * 0; }
  50% { left: @dotSize * 1; }
  66.66% { left: @dotSize * 0; }
  100% { left: @dotSize * 0; }
}

@keyframes dot_2_Anim {
  0% { left: @dotSize * 1; }
  16.66% { left: @dotSize * 1; }
  33.33% { left: @dotSize * 2; }
  66.66% { left: @dotSize * 2; }
  83.34% { left: @dotSize * 1; }
  100% { left: @dotSize * 1; }
}

@keyframes dot_3_Anim {
  0% { left: @dotSize * 2; }
  16.66% { left: @dotSize * 3; }
  83.34% { left: @dotSize * 3; }
  100% { left: @dotSize * 2; }
}