Bootstrap Carousel With Progress Bar



<div id="myCarousel" class="carousel slide myCarousel" data-interval="false" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol> 
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
      <!--put img inside itens like this-->
      <!--<img src="" alt="...">-->
        <div class="container">
    <div class="carousel-caption">
          <h3>First slide label</h3>
          <p>It's Responsive and Pauses on hover</p>
        </div>
        </div>
    </div>
    <div class="item">
        <div class="container">
        <div class="carousel-caption">
          <h3>Second slide label</h3>
          <p>If you use controls, progress bar will change too.</p>
        </div>
        </div>
    </div>
    <div class="item">
        <div class="container">
        <div class="carousel-caption">
          <h3>Third slide label</h3>
          <p>Bug fixed</p>
        </div>
        </div>
    </div>
  </div>
  <hr class="transition-timer-carousel-progress-bar" />
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
  </body>
</html>
.carousel-inner .item{
	background: #a7cfdf; /* Old browsers */
	background: -moz-linear-gradient(top,  #a7cfdf 0%, #23538a 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #a7cfdf 0%,#23538a 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #a7cfdf 0%,#23538a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
    text-align: center;
    height: 200px;/*change as your needs*/
}
.control-buttons{
	text-align:center;
}
.transition-timer-carousel-progress-bar {
    height: 3px;
    background-color: #5cb85c;/*progress bar color*/
    width: 0;
    margin: 0 0 0 0;
    border: none;
    z-index: 11;
    position: relative;
}
.carousel-control{
	z-index: 11;
}
$(document).ready(function(){
  
	var percent = 0,
	interval = 30,//it takes about 6s, interval=20 takes about 4s
	$bar = $('.transition-timer-carousel-progress-bar'),
	$crsl = $('#myCarousel');
  
	$('.carousel-indicators li, .carousel-control').click(function (){$bar.css({width:0.5+'%'});});
  
	$('#myCarousel').carousel({//initialize
		interval: false,
		pause: true
	}).on('slide.bs.carousel', function (){percent = 0;});
  
  //This event fires immediately when the bootstrap slide instance method is invoked.
	function progressBarCarousel() {
		$bar.css({width:percent+'%'});
		percent = percent +0.5;
		if (percent>=100) {
			percent=0;
			$crsl.carousel('next');
		}
	}
	var barInterval = setInterval(progressBarCarousel, interval);//set interval to progressBarCarousel function
	if (!(/Mobi/.test(navigator.userAgent))) {//tests if it isn't mobile
		$crsl.hover(function(){
					clearInterval(barInterval);
				},
				function(){
					barInterval = setInterval(progressBarCarousel, interval);
				}
		);
	}
});