JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css">
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<div class="content">
  <div class="slider">
    <div>
      <div class="image">
        <img src="https://kenwheeler.github.io/slick/img/lazyfonz1.png" alt="">
      </div> <!-- end image -->
    </div>
    <div>
      <div class="image">
        <img src="https://kenwheeler.github.io/slick/img/lazyfonz4.png" alt="">
      </div> <!-- end image -->
    </div>
    <div>
      <div class="image">
        <img src="https://kenwheeler.github.io/slick/img/lazyfonz3.png" alt="">
      </div> <!-- end image -->
    </div>
    <div>
      <div class="image">
        <img src="https://kenwheeler.github.io/slick/img/lazyfonz2.png" alt="">
      </div> <!-- end image -->
    </div>
    <div>
      <div class="image">
        <img src="https://kenwheeler.github.io/slick/img/lazyfonz5.png" alt="">
      </div> <!-- end image -->
    </div>
    <div>
      <div class="image">
        <img src="https://kenwheeler.github.io/slick/img/lazyfonz6.png" alt="">
      </div> <!-- end image -->
    </div>
  </div> <!-- end slider -->
  <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="slider__label"></div>
</div> <!-- end content -->

CSS

.progress {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 10px;
  overflow: hidden;
  
  background-color: #f5f5f5;
  background-image: linear-gradient(to right, black, black);
  background-repeat: no-repeat;
  background-size: 0 100%;
  
  transition: background-size 0.4s ease-in-out;
}




/**
 *  Demo Styles from the Slick Slider
 *  website
 */

body {
  background-color: #3498db;
}

.content {
  margin: auto;
  padding: 20px;
  width: 600px;
}

.slider {
  margin: 30px auto 50px;
}

.image {
  padding: 10px;
}

img {
  border: 5px solid #FFF;
  display: block;
  width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

JavaScript

function setProgress(index) {
  const calc = ((index + 1) / ($slider.slick('getSlick').slideCount)) * 100;

  $progressBar
    .css('background-size', `${calc}% 100%`)
    .attr('aria-valuenow', calc);

  $progressBarLabel.text(`${calc.toFixed(2)}% completed`);
}

const $slider = $('.slider');
const $progressBar = $('.progress');
const $progressBarLabel = $('.slider__label');

$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {   
  setProgress(nextSlide);
});

$slider.slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  speed: 400,
});  

setProgress(0);