css1.css

ul.loading li{
 list-style:none;
 width:3px;
 height:3px;
 display:inline-block;
 background:#fff;
 position:absolute;
 margin-left:-5%;
 top:85px;
 animation-name:loading;
 animation-duration:4s;
 animation-iteration-count:infinite;
 animation-timing-function:cubic-bezier(.05,.7,.95,.3);
}
@-webkit-keyframes loading{
 0%{margin-left:-5%}
 20%{margin-left:-5%}
 80%{margin-left:105%}
 100%{margin-left:105%}
}

html1.html

<ul class="loading">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

html2.html

<ul class="loading">
  <li></li>
  <li style="animation-delay: .25s"></li>
  <li style="animation-delay: .5s"></li>
  <li style="animation-delay: .75s"></li>
</ul>