Ggtcf

Official older link for Owl 1 progress bar doesn't even work anymore but I have found working example but also for Owl 1.

I have tried to use the code but I am not able to set it to work with Owl 2
http://codepen.io/anon/pen/GrgEaG

$(document).ready(function() 

 var time = 7; // time in seconds

 var $progressBar,
 $bar, 
 $elem, 
 isPause, 
 tick,
 percentTime;

 //Init the carousel
 $("#owl-demo").owlCarousel(
 items: 1,
 initialized : progressBar,
 translate : moved,
 drag : pauseOnDragging
 );

 //Init progressBar where elem is $("#owl-demo")
 function progressBar(elem)
 $elem = elem;
 //build progress bar elements
 buildProgressBar();
 //start counting
 start();
 

 //create div#progressBar and div#bar then prepend to $("#owl-demo")
 function buildProgressBar()
 $progressBar = $("<div>",
 id:"progressBar"
 );
 $bar = $("<div>",
 id:"bar"
 );
 $progressBar.append($bar).prependTo($elem);
 

 function start() 
 //reset timer
 percentTime = 0;
 isPause = false;
 //run interval every 0.01 second
 tick = setInterval(interval, 10);
 ;

 function interval() 
 if(isPause === false)
 percentTime += 1 / time;
 $bar.css(
 width: percentTime+"%"
 );
 //if percentTime is equal or greater than 100
 if(percentTime >= 100)
 //slide to next item 
 $elem.trigger('owl.next')
 
 
 

 //pause while dragging 
 function pauseOnDragging()
 isPause = true;
 

 //moved callback
 function moved()
 //clear interval
 clearTimeout(tick);
 //start again
 start();
 

 //uncomment this to make pause on mouseover 
 // $elem.on('mouseover',function()
 // isPause = true;
 // )
 // $elem.on('mouseout',function()
 // isPause = false;
 // )

);

#bar
 width: 0%;
 max-width: 100%;
 height: 4px;
 background: #7fc242;

#progressBar
 width: 100%;
 background: #EDEDED;

the callback functions are not being fired because you're calling them on events that don't exist in owlCarousel 2. The events are prefixed with 'on'.

So if you call them like this:

$("#owl-demo").owlCarousel(
 items: 1,
 onInitialized : progressBar,
 onTranslate : moved,
 onDrag : pauseOnDragging
);

The functions will be called. Check the owlCarousel event docs here.

Check out this CodePen for an example progressbar in OwlCarousel using CSS transitions.

After running into the need for a progress bar I stumbled across this question, as well as the example of a progress bar with owl-carousel v1.

Using v2.3.3 I came up with the following js/css-animation based solution:

javascript:

const $slider = $('.my-slider')
const SLIDER_TIMEOUT = 10000

$slider.owlCarousel(
 items: 1,
 nav: false,
 dots: false,
 autoplay: true,
 autoplayTimeout: SLIDER_TIMEOUT,
 autoplayHoverPause: true,
 loop: true,
 onInitialized: (target) => 
 const animationStyle = `-webkit-animation-duration:$SLIDER_TIMEOUTms;animation-duration:$SLIDER_TIMEOUTms`
 const progressBar = $(
 `<div class="slider-progress-bar"><span class="progress" style="$animationStyle"></span></div>`
 )
 $(target).append(progressBar)
 ,
 onChanged: (type, target) => 
 if (type === 'changed') 
 const $progressBar = $(target).find('.slider-progress-bar')
 const clonedProgressBar = $progressBar.clone(true)

 $progressBar.remove()
 $(target).append(clonedProgressBar)
 
 
)

scss

.slider-progress-bar 
 /* your progress bar styles here */

 .progress 
 height: 4px;
 background: red;
 animation: sliderProgressBar ease;
 


.my-slider:hover 
 .slider-progress-bar .progress 
 animation-play-state: paused;
 


@keyframes sliderProgressBar 
 0% 
 width: 0%;
 

 100% 
 width: 100%;