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);


}
}); 

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.