JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="cm">
  <li><span>01</span></li>
  <li><span>02</span></li>
  <li><span>03</span></li>
  <li><span>04</span></li>
  <li><span>05</span></li>
  <li class="loading"><span>06</span></li>
  <li class="loading"><span>07</span></li>
  <li class="loading"><span>08</span></li>
</ul>

SCSS

$Brdr: #7d868c;
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  &:before,&:after{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}
%notaList{
	margin: 0;
	padding: 0;
	list-style: none;
}

$node: 8;
$s: 80px;
$rotation: 0;

.no-transform,
.no-transform * { transition: none !important; }

.cm{
  top: 50%;
  left: 0;
  right: 0;
  width: $s;
  height: $s;
  margin: auto;
  display: block;
  position: absolute;
  transition: transform 0.8s ease-out;
  transform:rotate(#{$rotation}deg);
  @extend %notaList;
  background: rgba(#000, 0.5);
  border-radius: 50%;
  li{
    left: 0;
    top:-($s*2 - ($s/2));
    color:#333;
    width:90%;
    height: 90%;
    display: block;
    position: absolute;
    margin-bottom: ($s*2 - ($s/2));
    
    & > span{
      display: block;
      padding: 36%;
      text-align: center;
      overflow: hidden;
      background: #CCC;
      border-radius: 5px 5px 50% 50%;
      transition: transform 0.8s ease-out;
    }
    @for $i from 1 through $node{
      &:nth-child(#{$i}n) {
        transform-origin: 50% ($s*2);
        transform: rotate(($i - 1) * 360deg/$node);
        & > span {
          transform:rotate(($rotation * -1) - (($i - 1) * 360deg/$node));
        }
      }
    }
  }
}

JavaScript

var i = 1,
	nodes = 8;

setInterval(function() {
	if( i <= nodes ) {
  
    var rotation = i * 360 / nodes;
    i = i + 1;
    rotate( rotation, nodes )
    
  } else {

  	i = 2;
    
    // stop transforms and give CSS 1 frame to kick in
    $('.cm').addClass('no-transform');
    window.requestAnimationFrame(function() {
    
    	// reset rotation to 0
  	  rotate( 0, nodes );
      window.requestAnimationFrame(function() {
      
      	// back to rotating
        $('.cm').removeClass('no-transform');
        

      });
    });

  }

}, 1000);

function rotate( rotation, nodes ) {

  $('.cm').css({
  	'transform': 'rotate(' + rotation + 'deg)'
  }).attr('data-rotation', rotation);
  
  $('.cm li').each(function (node){
   	r = (node) * 360/nodes;
    $($('.cm li')[node]).find('span').css({
      'transform': 'rotate(' + ((rotation*-1) - r) + 'deg)'
    });
  });
  
}