<button id="btn">Toggle Animations</button>

<ul class="loading-animation" hidden>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul class="loading-animation alternate">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
@import url(https://fonts.googleapis.com/css?family=Merienda+One);
/* font is used in demo only. not required for the effect */

.loading-animation {
  list-style: none;
  position: relative;
  height: 1px;
  width: 200px;
  border-bottom: 1px dashed #aaa;
  position: relative;
}
.loading-animation li {
  margin-top: -3px;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background-color: blue;
  opacity: 0;
  box-shadow: 0px 0px 4px blue,0px 0px 8px blue,0px 0px 12px blue,0px 0px 18px blue;
  position: absolute;
  left: -10%;
  animation-name: loading;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: normal;
}
/* alternate animation */
.loading-animation.alternate li {
  animation-name: loading2;
}

.loading-animation li:nth-child(1) {
  animation-delay: 250ms;
}
.loading-animation li:nth-child(2) {
  animation-delay: 500ms;
}
.loading-animation li:nth-child(3) {
  animation-delay: 750ms;
}
.loading-animation li:nth-child(4) {
  animation-delay: 1s;
}
.loading-animation li:nth-child(5) {
  animation-delay: 1.25s;
}

/* fading only */
@keyframes loading {
  0% {
    left: 0%;
    opacity: 0;
  }
  20%, 60% {
    left: 50%;
    opacity: 1;
  }
  90% {
    left: 100%;
    opacity: 0;
  }
  100% {
    left: 100%;
  }
}

/* shrinking and fading */
@keyframes loading2 {
  0% {
    left: 0%;
    opacity: 0;
    height: 1px;
    width: 1px;
    margin-top: -2px;
  }
  20%, 60% {
    left: 50%;
    opacity: 1;
    height: 10px;
    width: 10px;
    margin-top: -3px;
  }
  90% {
    left: 100%;
    opacity: 0;
    height: 1px;
    width: 1px;
    margin-top: 0px;
  }
  100% {
    left: 100%;
  }
}

/* all of this is extra for the demo */
.loading-animation {
  margin: 0 auto;
  margin-top: 100px; 
}
.loading-animation:before, .loading-animation:after {
  color: grey;
  font-family: "Merienda One";
}
.loading-animation:before {
  content: "Loading";
  position: absolute;
  top: -32px;
  left: 39%;
}
.loading-animation:after {
  content: "Please wait";
  position: absolute;
  top: 12px;
  left: 36%;
}
$('#btn').on('click', function() {
   $('.loading-animation').toggle(); 
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js