seppderdepp seppderdepp - 5 months ago 23
jQuery Question

Display percentage value of progress bar dynamically

I can't seem to display my current upload value on my progress bar. I know how to do it, if the progress bar has stopped, but it won't work if I want it to update all the time.

xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentage = (e.loaded / e.total) * 100;
$('div.progress-bar').css('width', percentage + '%');
}
};


<div class="progress progress-striped active hide">
<div style="width: 0%" class="progress-bar progress-bar-striped active">
<script>
$("div.progress-bar").text($("div.progress-bar").width() + "%" );
</script>
</div>
</div>


The progress bar itself runs fine. This code just outputs "0%" all the time, as the initial width()-value is 0. I want it to increase along with the progress bar dynamically.

Thanks in advance!

Answer

You just need to also set the text() of the progress bar too:

xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
        var percentage = (e.loaded / e.total) * 100;
        $('div.progress-bar').css('width', percentage + '%').text(percentage + '%');
    }
};
Comments