I am encountering an issue with my Bootstrap 2.3 progress bars. They are supposed to show async file reads and be animated by updating their CSS properties using jQuery. However, the problem I'm facing is that the scale seems to be off - when the progress bar reaches around 100%, only about a third of it is displayed:
Despite the calculations being correct (for example, in the image provided we are at 94% completion), I am puzzled as to why the proportions are incorrect. Here is the HTML code (with and without the aria values):
<div class="progress progress-striped active" role="progressbar"
aria-valuemin="0" aria-valuemax="100">
<div class="bar" style="width: 0%;"></div>
</div>
Along with the corresponding JavaScript code:
// ... grab the bar element as a jQuery object
var progPercent = ((currentChunk + 1) / chunks) * 100;
$bar.css('width', progPercent).attr('aria-valuenow', progPercent);
console.log($bar.width()); // shows correct percentage
$bar.text($bar.width() + '%'); // text is correct
Could you help me identify what's causing this issue? ;-).