对进度条进行动画处理而无需刷新网页

Question

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?

Answer 1

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>