Как сделать анимационный круг?

Question

Подскажите пожалуйста, как сделать так, чтобы получился такой анимационный круг:

Сложность заключается в формирование данного круга, все текущие объекты прижаты друг к другу. Нужно сделать расположение кругов и объектов, было как на картинке примера. Подскажите пожалуйста как можно это сделать. Движение кругов должно быть одинаковым

Код:

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color .2s ease-out;
}

.loading-anim {
  position: relative;
  width: 200px;
  height: 200px;
  margin: auto;
  perspective: 800px;
  transform-style: preserve-3d;
  transform: translateZ(-100px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) scale(0.5);
  opacity: 0;
  transition: all .2s ease-out;
}
.loading-anim .circle {
  width: 100%;
  height: 100%;
  animation: spin 5s linear infinite;
}
.loading-anim .border {
  position: absolute;
  border-radius: 50%;
  border: 3px solid grey;
}
.loading-anim .out {
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: spin 2s linear reverse infinite;
}
.loading-anim .in {
  top: 18%;
  left: 18%;
  width: 64%;
  height: 64%;
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: spin 2s linear infinite;
}
.loading-anim .mid {
  top: 40%;
  left: 40%;
  width: 20%;
  height: 20%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: spin 1s linear infinite;
}

.loading-page .loading-anim {
  transform: translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1);
  opacity: 1;
}

.loading-page .loading-overlay {
  background: rgba(255, 255, 255, 0.5);
}

.dot {
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  animation: jitter 5s ease-in-out infinite, fade-in-out 5s linear infinite;
  
}

.dot img {
  width: 100px;
  height: 100px;
}

.dot:nth-child(1) {
  top: 90px;
  left: 180px;
  animation-delay: 0s;
}

.dot:nth-child(2) {
  top: 135px;
  left: 168px;
  animation-delay: 0.41667s;
}

.dot:nth-child(3) {
  top: 168px;
  left: 135px;
  animation-delay: 0.83333s;
}

.dot:nth-child(4) {
  top: 180px;
  left: 90px;
  animation-delay: 1.25s;
}

.dot:nth-child(5) {
  top: 168px;
  left: 45px;
  animation-delay: 1.66667s;
}














@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes jitter {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.7, 0.7);
  }
  50% {
    transform: scale(1, 1);
  }
  75% {
    transform: scale(1.3, 1.3);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes fade-in-out {
  0% {
    opacity: 0.8;
  }
  25% {
    opacity: 0.2;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}

<div class=' loading-page'>
  <div class='loading-overlay'></div>
  <div class='loading-anim'>
    <div class='border out'></div>
    <div class='border in'></div>
    <div class='border mid'></div>
    <div class='circle'>
      <span class='dot'>
        <img src="https://image.flaticon.com/icons/png/512/4833/4833193.png" alt="">
      </span>
      <span class='dot'>
        <img src="https://image.flaticon.com/icons/png/512/4833/4833195.png" alt="">
      </span>
      <span class='dot'>
        <img src="https://image.flaticon.com/icons/png/512/4833/4833199.png" alt="">
      </span>
      <span class='dot'>
        <img src="https://image.flaticon.com/icons/png/512/4833/4833204.png" alt="">
      </span>
      <span class='dot'>
        <img src="https://image.flaticon.com/icons/png/512/4833/4833248.png" alt="">
      </span>
      
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как сделать анимационный круг?

Ответы (0 шт):