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>