CODEWITHSUNDEEP
javascripthtmlcssprogress-bar
naik3
naik3

Reputation: 309

Updating progress bar using JavaScript

I am not getting how can I update progress bar. Here is my code,

socket.on('value',function(data){
    console.log(data); // For example, this prints value '10'
 // Here i have to update progress bar.
}

I want to divide value by 10, equally and adjust the progress width to 100%. Can anyone help me doing this? Is it possible? I am new to this concept. Please help me solving this.

Upvotes: 0

Views: 1336

Answers (1)

serge1peshcoff
serge1peshcoff

Reputation: 4650

If you are using <progress> element, you can update it inside your callback like that:

// suppose your <progress> element is defined this way:
<progress min=0 max=100 id="myProgressBar"></progress>

// updating it:
socket.on('value',function(data){
    console.log(data); // For example, this prints value '10'
    $("#myProgressBar").val(data / 10) // here is the one way to update it
}

Also you can omit dividing by 10 (and just call $("#myProgressBar").val(data) ) and just specify max=10 (or whatever your maximum value is) inside your element's attributes.

Upvotes: 2

Related Questions