.donut1 {
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background: linear-gradient(90deg, #D82EB5 0.52%, #9245FD 103.83%);
}
.donut1.spin {
  animation: rotate1 1s linear infinite;
}

.donut2 {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(90deg, #D82EB5 0.52%, #9245FD 103.83%);
  position: relative;
  left: 15px;
  top: 15px;
}
.donut2.spin {
  background: linear-gradient(270deg, #D82EB5 0.52%, #9245FD 103.83%);
  animation: rotate1 1s linear infinite;
}

.donut3 {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(90deg, #D82EB5 0.52%, #9245FD 103.83%);
  position: relative;
  left: 15px;
  top: 15px;
}
.donut3.spin {
  animation: rotate1 1s linear infinite;
}

.dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #351A4B;
  position: relative;
  left: 15px;
  top: 15px;
}

@keyframes rotate1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}