owlCarousel-progressbar.html

<div class="container">
  <div class="owl-demo">
    <div class="slide-progress"></div>
    <div class="owl-carousel owl-theme">
      <div class="item">
        <img src="http://placehold.it/850x350" alt="slide">
      </div>
      <div class="item">
        <img src="http://placehold.it/850x350" alt="slide">
      </div>
      <div class="item">
        <img src="http://placehold.it/850x350" alt="slide">
      </div>
    </div>
  </div>
</div>

<style>
.slide-progress {
  width: 0;
  max-width: 100%;
  height: 4px;
  background: #7fc242;
}
</style>

<script>
//Init the carousel
initSlider();

function initSlider() {
  $(".owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    onInitialized: startProgressBar,
    onTranslate: resetProgressBar,
    onTranslated: startProgressBar
  });
}

function startProgressBar() {
  // apply keyframe animation
  $(".slide-progress").css({
    width: "100%",
    transition: "width 5000ms"
  });
}

function resetProgressBar() {
  $(".slide-progress").css({
    width: 0,
    transition: "width 0s"
  });
}
</script>