How to increment progress bar during image upload?

Question

I have the following html

 <div class="progress">
     <div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60% Complete</span>
     </div>
 </div>

I have the jquery as......

$('#fileupload').fileupload({
    //.....something here
    progress: function(e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.progress .bar').css('width', progress + '%');
    },
});

I want to display total percent and some animation(which should increment based on file upload) but unable to fix the stuff. I referred the fiddle and I tried doing the same but end up with no solution. Any suggestions or answers highly appreciated. Thanks

Answer 1

All I did is just replaced the Html with the following one...

  <div id="progress" class="progress progress-striped active" style="float:left; margin-left:30px;" >
  <div class=" bar progress-bar progress-bar-primary" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
  </div>
  <div id="divStatus"></div>

and then within fileupload...

progressall: function (e, data) {               
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').text(progress + '%');               
            $('#progress .bar').width(progress);
            progress == 100 ? $('#progress .bar').css('animation', 'progress-bar-stripes 0s linear infinite') : $('#progress .bar').css('animation', 'progress-bar-stripes 2s linear infinite');
        },