# Progress Bar

# Setup

Progress Bar made by three callbacks: `afterInit`, `afterMove` and `startDragging`.

    $(document).ready(function() {

      var time = 7; // time in seconds

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

        //Init the carousel
        $("#owl-demo").owlCarousel({
          slideSpeed : 500,
          paginationSpeed : 500,
          singleItem : true,
          afterInit : progressBar,
          afterMove : moved,
          startDragging : 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;
        // })

    });

    <div id="owl-demo" class="owl-carousel owl-theme">

      <div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
      <div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
      <div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>

    </div>

    #owl-demo .item img{
      display: block;
      width: 100%;
      height: auto;
    }
    #bar{
      width: 0%;
      max-width: 100%;
      height: 4px;
      background: #7fc242;
    }
    #progressBar{
      width: 100%;
      background: #EDEDED;
    }

# More Demos

### Images

### Full Width

### Custom

### One Slide

### JSON

### JSON Custom

### Lazy Load

### Auto Height