jQuery to change values of progress-bar "aria-valuenow" attribute and CSS "width" property

jquery progress-bar
Ray_Hack picture Ray_Hack · Jun 4, 2015 · Viewed 34.5k times · Source

I have a progress bar on my page (Bootstrap) that looks like this:

<div id="theprogressbar" class="progress-bar progress-bar-u" 
     role="progressbar" aria-valuenow="75%" aria-valuemin="0" 
     aria-valuemax="100" style="width: 75%">

I would like to update it via jQuery, I have already done most of the work and calculated the new value I need to put into it, but am unsure of how to target the aria-valuenow and the style="width: " values.

Assuming my jQuery gives me the new value+% as a variable called newprogress:

$('#theprogressbar'). *(please help me finish this line)* (newprogress)

Answer

Denis Slonovschi picture Denis Slonovschi · Jun 4, 2015 
$('#theprogressbar').attr('aria-valuenow', newprogress).css('width', newprogress);

value default is px if you want set % follow code below

$('#theprogressbar').attr('aria-valuenow', newprogress).css('width', newprogress+'%');

Related questions

File upload progress bar with jQuery

I am trying to implement an AJAX file upload feature in my project. I am using jQuery for this; my code submits the data using AJAX. I also want to implement a file upload progress bar. How can I do …

Read More
Display a loading bar before the entire page is loaded

I would like to display a loading bar before the entire page is loaded. For now, I'm just using a small delay: $(document).ready(function(){ $('#page').fadeIn(2000); }); The page already uses jQuery. Note: I have tried this, but it …

Read More
Dynamically change bootstrap progress bar value when checkboxes checked

I'm trying to make a dynamic checklist with bootstrap progress bar. Here's my markup code <div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> </div> </div> <div …

Read More