I am trying to create a progress bar to indicate some dummy statistics on a website. The values of the progress bar are hard coded. I have managed creating the progress bar like this
.progress .progress-bar { box-shadow: none; position: relative; border-radius: 20px; animation: animate-positive 1s; } @keyframes animate-positive { 0% { width: 0; } }
<div class="progress"> <div class="progress-bar" style="width: 60%; background: goldenrod;"> <h3 class="progress-title">Happy Clients</h3> <div class="progress-value">60+</div> </div> </div>
My problem is that this only animates when the page loads and one has to refresh the page to view it again. Is there a way I can animate it only when the section is visible?
I hope this is what you are looking for:
.progress .progress-bar { box-shadow: none; position: relative; border-radius: 20px; animation: animate-positive 1.5s ease 0s alternate infinite none running; } .progress-title{ white-space:nowrap; } @keyframes animate-positive { 0% { width: 0; } 50% { width: 50%; } 100% { width: 0; } }
<div class="progress"> <div class="progress-bar" style="width: 60%; background: goldenrod;"> <h3 class="progress-title">Happy Clients</h3> <div class="progress-value">60+</div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.