CODEWITHSUNDEEP
jquerycsstwitter-bootstrapbootstrap-4progress-bar
AndrewLeonardi
AndrewLeonardi

Reputation: 3512

Bootstrap 4 - Progress Bar Progression

Seems like Bootstrap 4 has changed the way you update the progression of your progress bar.

Goal: Update the progress bar percentage on click

<div  class="progress">
<div id='progressBar' class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemax="100"></div>
</div>

How I'm trying to Update the percentage: 

$( ".nextStep" ).click(function() {
$( "#progressBar" ).css({"width": "90%"});
});

Upvotes: 1

Views: 954

Answers (1)

user11146000
user11146000

Reputation:

This codesnippet works for me:

$(".nextStep").click(function() {
    $("#progressBar")
        .css({"width": "90%"})
       .setAttribute("aria-valuenow", 90);
});

Here is your example in a codepen: https://codepen.io/AndTheGodsMadeLove/pen/vYBGzeQ

Upvotes: 3

Related Questions