Width of progress bar incorrect

I created an animated progress bar but it doesn't work as hoped for. I want 20% of the bar to show up but 100% of the bar shows up instead. It does however show the percentage correctly.

I link to jquery and modernizr.

Here is my javascript

$(document).ready(function() {
if(!Modernizr.meter){
alert('Sorry your brower does not support HTML5 progress bar');
} else {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (1000/max)*5,
value = progressbar.val();

var loading = function() {
value += 1;
addValue = progressbar.val(value);

$('.progress-value').html(value + '%');

if (value == max) {
clearInterval(animate);
}
};

var animate = setInterval(function() {
loading();
}, time);
};
});

And here is my HTML:

<progress id="progressbar" value="0" max="20"></progress>
<span class="progress-value">20%</span>

 

Set the progress#progressbar max value to be 100, instead of 20. But then... the span.progressvalue already holds the final value (=20)
Umm, I think you're mixing the max and target (final value). They're different.

 

I want two progress bars buut when I just duplicate my jquery code it doesn't work. How can I get two progress bars?

 

Thank you hdewantara

 

This is the code that I use but doesn't work:
$(document).ready(function() {

var progressbarB = $('#progressbar-2'),
max = progressbarB.data('max'),
time = (1000 / max) * 5,
valueB = progressbarB.val();

var loadingB = function() {
valueB += 1;
addValueB = progressbarB.val(valueB);

$('.progress-value-2').html(valueB + '%');
if (valueB == max) {
clearInterval(animateB);
}
};

var animateB = setInterval(function() {
loadingB();
}, time);

var progressbar = $('#progressbar'),
max = progressbar.data('max'),
time = (1000 / max) * 5,
value = progressbar.val();

var loading = function() {
value += 1;
addValue = progressbar.val(value);

$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate);
}
};

var animate = setInterval(function() {
loading();
}, time);


});

 

The HTML is


<progress id="progressbar" value="0" max="100" data-max="20"></progress>
<span class="progress-value">20%</span>

<progress id="progressbar-2" value="0" max="100" data-max="30"></progress>
<span class="progress-value-2">30%</span>

 

The first progress bar is supposed to climb to 20% and stop but the second progress bar is supposed to climb to 30% and stop - not 20%.

 

Your problem was your ran them as one and the same. This works fine:

https://jsfiddle.net/76ez3Luk/2/

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
var progressbarB = $('#progressbar'),
max = progressbarB.data('max'),
time = (1000 / max) * 5,
valueB = progressbarB.val();
var loadingB = function() {
valueB += 1;
addValueB = progressbarB.val(valueB);
$('.progress-value').html(valueB + '%');
if (valueB == max) {
clearInterval(animateB);
}
};
var animateB = setInterval(function() {
loadingB();
}, time);
});
$(document).ready(function() {
var progressbar = $('#progressbar-2'),
max = progressbar.data('max'),
time = (1000 / max) * 5,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value-2').html(value + '%');
if (value == max) {
clearInterval(animate);
}
};
var animate = setInterval(function() {
loading();
}, time);
});
});//]]>
</script>

<progress id="progressbar" value="0" max="100" data-max="20"></progress>
<span class="progress-value">20%</span>
<progress id="progressbar-2" value="0" max="100" data-max="30"></progress>
<span class="progress-value-2">30%</span>

Code (markup):

 

Thank you so much, qwikad.com