Menu
I have some Bootstrap code which works perfectly well to animate a section of progress bars when it is viewed by the user.
However it animates all the progress bars in the page instead of animating only the progress bars in that viewed section. As a result, when the user goes to another section of progress bars, these are already animated and he does not see any animation.
My question is then: how to modify the code below to animate independently the different sections as they are viewed?
#skills {
padding: 60px 0;
}
#skills .progress {
height: 35px;
margin-bottom: 10px;
}
#skills .progress .skill {
font-family: "Open Sans", sans-serif;
line-height: 35px;
padding: 0;
margin: 0 0 0 20px;
text-transform: uppercase;
}
#skills .progress .skill .val {
float: right;
font-style: normal;
margin: 0 20px 0 0;
}
#skills .progress-bar {
width: 1px;
text-align: left;
transition: .9s;
}
// Skills section
$('#skills').waypoint(function() {
$('.progress .progress-bar').each(function() {
$(this).css("width", $(this).attr("aria-valuenow") + '%');
});
}, { offset: '80%'} );
<!-- The first section of progress bars somewhere in the page -->
<section id="skills">
<div class="skills-content">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-
valuemax="100"></div>
<span class="skill">Skillset 1 - Skill 1 <i class="val"></i></span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-
valuemax="100"></div>
<span class="skill">Skillset 1 - Skill 2 <i class="val"></i></span>
</div>
</div>
</section>
<!-- Another section of progress bars further down the page -->
<section id="skills">
<div class="skills-content">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-
valuemax="100"></div>
<span class="skill">Skillset N - Skill 1 <i class="val"></i></span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-
valuemax="100"></div>
<span class="skill">Skillset N - Skill 2 <i class="val"></i></span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-
valuemax="100"></div>
<span class="skill">Skillset N - Skill 3 <i class="val"></i></span>
</div>
</div>
</section>
533
For creating a default static progress bar, we need the following elements. aria-valuenow- This is known as curent progress bar value. aria-valuemin- This is known as initial value of the progress bar value. aria-valuemax- This is known as maximum value of the progress bar value.
You have to use class . active to create animated progress bar.
Animate Bootstrap progress bar. Follow the below given steps to create an animated progress bar: Add a <div> with a class of .progress and .progress-striped. Also, add class .active to .progress-striped. Next, inside the above <div>, add an empty <div> with a class of .progress-bar.
Add class .progress-bar-striped to add stripes to the progress bars: Add class .active to animate the progress bar: Create a stacked progress bar by placing multiple bars into the same <div class="progress">: Add the correct classes to make this HTML code behave as a progress bar.
Using Progress Bar, users can easily know the status of work done for a particular process. For example, if a user is downloading a file, the progress bar can be used to show the progress of the ongoing download, the same is the case for uploading and etc.
To create a default progress bar, add a .progress class to a <div> element: Note: Progress bars are not supported in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve some of their effects). Note: To help improve accessibility for people using screen readers, you should include the aria-* attributes.
i just noticed you don't close your section elements and other tags properly
<section class="skills">
<div class="skills-content">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria- valuemax="100">
</div>
<span class="skill">Skillset 1 - Skill 1 <i class="val"></i></span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- valuemax="100">
</div>
<span class="skill">Skillset 1 - Skill 2 <i class="val"></i></span>
</div>
</div>
</section>
<!-- Another section of progress bars further down the page -->
<section class="skills">
<div class="skills-content">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria- valuemax="100">
</div>
<span class="skill">Skillset N - Skill 1 <i class="val"></i></span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria- valuemax="100">
</div>
<span class="skill">Skillset N - Skill 2 <i class="val"></i></span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- valuemax="100">
</div>
<span class="skill">Skillset N - Skill 3 <i class="val"></i></span>
</div>
</div>
</section>
when your waypoint function called you each all your progress elements instead of only child progress elements
$('#skills').waypoint(function() {
$('.progress .progress-bar').each(function() { // <- you are getting all progress elements
$(this).css("width", $(this).attr("aria-valuenow") + '%');
});
}, { offset: '80%'} );
change to
$('.skills').waypoint(function () {
var el = this.element;
var children = $(el).find(".progress-bar");
$(children).each(function () { // <- make sure getting only children elements
$(this).css("width", $(this).attr("aria-valuenow") + '%');
});
}, { offset: '80%' });
and make sure other skills section not viewing by user when page loaded(not in the viewport)
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
