<div class="loader-con">
<div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
   <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
body {
  background-color: #000000;
  font-size: 1.1em;
  margin: 0;
}

.loader-con {
	position: absolute;
  width: 400px;
  height: 400px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.dot {
	position: absolute;
  width: 4em;
  height: 4em;
  margin: -2em 0 0 -2em;
  background: #f137ec;
  motion-path: path("M305,90 a150,150 0 1,0 1,1"); /**
  points of the arc withing 400x400 dimension (try using these points with a SVG path)
  ***/
  motion-offset: -50%;
  border-radius: 50%;
  animation: move 3.5s ease-in infinite;
  transform: scale(0);
}

.dot:nth-child(2){
  animation-delay: .2s;
  background: #ff3d1a;
}

.dot:nth-child(3) {
  animation-delay: .4s;
  background: #ffd41a;
}

.dot:nth-child(4){
  animation-delay: .6s;
  background: #1afff6;
}

.dot:nth-child(5){
  animation-delay: .8s;
  background: #1a4fff;
}

.dot:nth-child(6) {
  animation-delay: 1s;
  background: #ff1aa5;
}

.dot:nth-child(7){
  animation-delay: 1.2s;
  background: #1aff6a;
}

@keyframes move {
  to {
    motion-offset: 100%;
     transform: scale(1);
  }
}

@media (max-width: 800px) {
  .dot {
    width: 1.5em;
    height: 1.5em;
      motion-path: path("M250,200 a50,50 0 1,0 1,1");/***reduced size of the arc***/
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.