JSFiddle - React, Tailwind, and code Playground

by Chan Wu

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<div class="clear"></div>
<button type="button" id="start">start</button>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    float: left;
    margin: 2px;
}
.on {
    border: 2px solid pink;
}
.clear {
    clear: both;
}

JavaScript

$('#start').on('click', function() {
  var rounds = 43;
    
  function spin(li, rounds) {
    var duration = rounds<5 ? 1000 : 5000;
        
    $('li').stop(true);
      
    li.delay(duration).queue(function() {
      var nextBox= $(this).next('li');
      if(!nextBox.length) {
        nextBox= $('li:first');
      }
          
      $('li').removeClass('on');
      $(this).addClass('on');
      if(rounds-1) {
        spin(nextBox, rounds-1);
      }
    });
  } //spin
    
  spin($('li:first'), rounds);
});