jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<div class="tab-column">
  <div class="tab-wrap">
    <h2>
    Hover to stop animation
    </h2>
  </div>
</div>

<div class="tab-indicators">
  <ul>
    <li>
      <div></div>
    </li>
    <li>
      <div></div>
    </li>
    <li>
      <div></div>
    </li>
  </ul>
</div>

SCSS

body {
  background-color: black;
}

.tab-column {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: white;
}

.tab-wrap {
  width: 100px;
  height: 100px;
}

.tab-indicators ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  max-width: 282px;
  width: 100%;
  margin: 0 auto;
  margin-top: 32px;
}

.tab-indicators ul li {
    background-color: grey;
    max-width: 63px;
    width: 100%;
    height: 4px;
    border-radius: 12px;
  }

.active {
    div {
      background-color: #fff000;
      height: 4px;
      width: 0%;
      border-radius: 12px;
      animation: vertical-tab-progress-bar 3s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
    }
  }

.paused div {
   animation-play-state: paused;
}

@keyframes vertical-tab-progress-bar {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

JavaScript

var $items = $('.tab-indicators ul li'),
      timer = 3000;
      $items.first().addClass('active');

  setInterval(function(){
    var $current = $items.filter('.active'),
        $next = $current.next().length ? $current.next() : $items.first();

    $current.removeClass('active');
    $next.addClass('active');
  }, timer);



  $(".tab-column .tab-wrap").on("mouseenter", function() {
        $(".tab-indicators ul .active").addClass("paused");
    }).on("mouseleave", function() {
        $(".tab-indicators ul .active").removeClass("paused");
  });