title: How to create progress bar for Owl Carousel 2?
body: <p>Official older <a href="http://www.owlgraphic.com/owlcarousel/demos/progressBar.html" rel="noreferrer">link</a> for Owl 1 progress bar doesn't even work anymore but I have found working <a href="http://www.jq22.com/demo/jquery-lbt20151019/demos/progressBar.html" rel="noreferrer">example</a> but also for Owl 1. </p>
  
  <p>I have tried to use the code but I am not able to set it to work with Owl 2
  <a href="http://codepen.io/anon/pen/GrgEaG" rel="noreferrer">http://codepen.io/anon/pen/GrgEaG</a></p>
  
  <pre><code>$(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 = $("&lt;div&gt;",{
          id:"progressBar"
        });
        $bar = $("&lt;div&gt;",{
          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 &gt;= 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;
  }
  </code></pre>