set progress bar value from variable

Question

I have a variable which updates based on percent file downloaded. How can I get this variable to update a progress bar?

var percent = (len / res.headers['content-length']) * 100;

I have tried this to no avail:

<progress class="progress"></progress>

$('.progress').val = percent;

Answer 1

You need to set the value using the setter of .val(newValue) . val just gives you the function reference, you are just resetting it to the value of variable percent, not really assigning it as value.

Change

 $('.progress').val = percent;

to

 $('.progress').val(percent);

You could also do $('.progress')[0].value = percent . probably that is what you had in mind. But val in jquery is used as a function, (more like getter, setter kind of functionality).

Also do remember that progress element takes value ranging from 0.0 to 1.0 or the value of the max attribute (if present).

Answer 2

Pass value in val() like,

$('.progress').val(percent);

HTML

<progress class="progress" value="10" max="100"></progress>

Fiddle

Answer 3

you are giving in wrong way

give like this

 $('.progress').val(percent);

see val()

Answer 4

Your method is wrong in jquery you need to write like this:

$('.progress').val(percent);