Разноцветные движущиеся точки: анимация загрузки на CSS

See the Pen Moving Dot by Arlina Code (@arlinacode) on CodePen.
HTML
<div id='preloader'>
<div class='spinner'>
<div class='loader'>
<div class='moving-dot'></div>
<div class='moving-dot'></div>
<div class='moving-dot'></div>
<div class='moving-dot'></div>
<div class='moving-dot'></div>
<div class='moving-dot'></div>
</div>
</div>
</div>
CSS
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center}
.loader{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
.moving-dot{-webkit-animation-name:loader;animation-name:loader;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white}
.moving-dot:first-child{background-color:#8cc759;-webkit-animation-delay:0.5s;animation-delay:0.5s}
.moving-dot:nth-child(2){background-color:#8c6daf;-webkit-animation-delay:0.4s;animation-delay:0.4s}
.moving-dot:nth-child(3){background-color:#ef5d74;-webkit-animation-delay:0.3s;animation-delay:0.3s}
.moving-dot:nth-child(4){background-color:#f9a74b;-webkit-animation-delay:0.2s;animation-delay:0.2s}
.moving-dot:nth-child(5){background-color:#60beeb;-webkit-animation-delay:0.1s;animation-delay:0.1s}
.moving-dot:nth-child(6){background-color:#fbef5a;-webkit-animation-delay:0s;animation-delay:0s}
@-webkit-keyframes loader{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}
@keyframes loader{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}