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;

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;

• javascript
• jquery
• html

4 Answers 4

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).

Pass value in val() like,

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

HTML

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

Fiddle

you are giving in wrong way

give like this

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

see val()

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

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