JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="resize">
  <div class="circle">
    <div class="track one">
      <div class="ball"></div>
    </div>
    <div class="track two">
      <div class="ball"></div>
    </div>
    <div class="track three">
      <div class="ball"></div>
    </div>
    <div class="track four">
      <div class="ball"></div>
    </div>
    <div class="track five">
      <div class="ball"></div>
    </div>
    <div class="track six">
      <div class="ball"></div>
    </div>
    <!-- <div class="track seven">
    <div class="ball"></div>
  </div>
  <div class="track eight">
    <div class="ball"></div>
  </div>
  <div class="track nine">
    <div class="ball"></div>
  </div>
  <div class="track ten">
    <div class="ball"></div>
  </div>
  <div class="track eleven">
    <div class="ball"></div>
  </div>
  <div class="track twelve">
    <div class="ball"></div>
  </div> -->
  </div>
</div>

SCSS

BODY {
  height: 100%;
  padding: 10px;
}

.resize {
  width: 200px;
  height: auto;
  resize: both;
  aspect-ratio: 1 / 1;
  overflow: auto;
  padding: 7%;
  position: relative;
  //background: cadetblue;
}

.circle {
  width: 100%;
  height: auto;
  //background: red;
  position: relative;
  border-radius: 50%;

  &::after {
    content: '';
    padding-bottom: 100%;
    display: block;
  }
}

.track {
  width: 10%;
  height: 100%;
  //border-radius: 10px;
  background: transparent;
  //border: 1px solid white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  transform-origin: 0 0;
}

.ball {
  width: 100%;
  height: auto;
  background: black;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  //animation: moveUpDown 5s ease infinite;

  &::before {
    content: '';
    padding-bottom: 100%;
    display: block;
  }

  &::after {
    content: '';
    display: block;
    width: 150%;
    height: 150%;
    background: black;
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
  }
}



@mixin rotate-children($num-children, $increment) {
  @for $i from 1 through $num-children {
    .circle .track:nth-child(#{$i}) {
      transform: rotate(#{$i * $increment - $increment}) translate(-50%, -50%);

      .ball {
        animation: moveUpDown#{$i} 2880ms linear infinite;
        animation-delay: #{($i - 1) * 240}ms;
      }

      
    }
    
    @keyframes moveUpDown#{$i} {
        0% {
          top: 0;
        }

        50% {
          top: 100%;
        }

        100% {
          top: 0;
        }
      }
  }
}

@include rotate-children(6, 30deg);