* {

  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);

  }

}