Progress bar add on for FlexSlider

flexslider-progress-bar.html

<div class="progress_bar_container">
	<div class="progress_bar"></div>
</div>

flexslider-progress-bar.js

var slider = $('#introSlider');

slider.flexslider({
animation: "slide",
directionNav: false,
slideshow: true,
 slideshowSpeed: 8000,
                     animationSpeed: 1500,
 start: function(slider){
 	//initial load

 	positionSlide();
    $(window).resize(positionSlide);

    $('#introSlider .slides > li').fadeIn(350);
    $('.caption').fadeIn(350);
    $('body').removeClass('loading');

   	var progressBar = $('.progress_bar');
      progressBar.animate({'width': "100%"}, 8000, function(){
      	$(this).css({'width' : 0})
      });

      $(".flex-control-paging li a").on("click", function(){
      	$('.progress_bar_container').fadeOut(300);
});

      // setTimeout(function(){
      // 	$('.caption').fadeOut(500);
      // }, 8000)
},
before: function(){	
	//fires with each slide transition

      	$('.caption').fadeOut(500);

    	$('.progress_bar').animate({'width': "100%"}, 8000, function(){
      	      $(this).css({'width' : 0})
          });

},        
after: function(){
	//firs after each slide completes
	$('.caption').fadeIn(350);


}
}); 

Been looking for this! Awesome!

Just one issue for me tho, the loading bar doesn't start until all my slider goes for the "second spin", after the images have been shown one time already, you know why this is?

I cant find define of function positionSlide() :( please help

I have a small issue here, the progress bar doesn't start until the second slide. Any idea ? Thank you

In your css initiate the width to 0 along your other styles if you have:
.progress_bar { width: 0; }

That worked for me.