How to start the progress bar animation from left to right in owl carousel 2

Question

I am using Owl carosual2 with the progress bar. I refer this question

How to create progress bar for Owl Carousel 2? and the accepted answer is working.

My code is here .

Now What I am doing is, I don't want to display the progress bar 100%. I have to display a 50% progress bar with the center align. I tried but there is some issue with progress bar animation. It's going left and right. I want it to start from left and end it on right.

I am getting the output

Answer 1

You can design progress bar using parent div. Please check demo in full screen.

//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"
  });
}

.owl-demo .item img {
  display: block;
  width: 100%;
  height: auto;
}

.slide-progress {
  width: 0;
  max-width: 100%;
  height: 4px;
  background: #7fc242;
}
.slide-progress-main{
  float:none;
  margin:30px auto;
  width:50%
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>

<div class="container">
  <div class="owl-demo">
    <div class="slide-progress-main">
      <div class="slide-progress"></div>
    </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>