* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  position: relative;
  margin: 50px;
  border: 1px solid #666;
  width: 300px;
  height: 180px;
  overflow: hidden;
}

.box i {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 10px solid;
  border-right: transparent 10px solid !important;
  border-bottom: transparent 10px solid !important;
}

.box i:before {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background: #fce428;
  top: 238px;
  left: 33px;
}

.box .b2:before {
  top: 202px;
  left: 26px;
  background: #1eba8a;
}

.box .b3:before {
  top: 168px;
  left: 20px;
  background: #ea21aa;
}

.box .b4:before {
  top: 134px;
  left: 14px;
  background: #65e2f8;

}

.box .b1 {
  top: -155px;
  left: 0;
  animation: b1 0.7s forwards;
  border-color: #fce428;
}

.box .b2 {
  top: -135px;
  left: 20px;
  width: 260px;
  height: 260px;
  animation: b2 0.76s forwards;
  border-color: #1eba8a;
}

.box .b3 {
  top: -115px;
  left: 40px;
  width: 220px;
  height: 220px;
  animation: b3 0.78s forwards;
  border-color: #ea21aa;
}


.box .b4 {
  top: -95px;
  left: 60px;
  width: 180px;
  height: 180px;
  animation: b4 0.8s forwards;
  border-color: #65e2f8;
}

@keyframes b1 {
  from {
    transform: rotate(406deg);
  }

  to {
    transform: rotate(245deg);
  }
}

@keyframes b2 {
  from {
    transform: rotate(406deg);
  }

  to {
    transform: rotate(300deg);
  }
}

@keyframes b3 {
  from {
    transform: rotate(406deg);
  }

  to {
    transform: rotate(340deg);
  }
}

@keyframes b4 {
  from {
    transform: rotate(406deg);
  }

  to {
    transform: rotate(370deg);
  }
}