Animate a progress bar without refreshing web page

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?

Connect to an API endpoint of your back-end, e.g. a XHR request, to get the latest progress value and then use JavaScript to your progress bar. — Nick, Aug 15 '18 at 14:33
@Nick Would you mind telling me how or refer me to any tutorial on how to do that? — , Aug 15 '18 at 14:39
Sorry, this question is too general. It depends on many factors, e.g. what your back-end is and where your values are coming from in the first place. You could start solving your problem like this: Where do you get the `60%` value from? I guess you get that number in your back-end and then render it into a HTML page.. Then learn how to make an API and XHR requests... Good luck! — Nick, Aug 15 '18 at 14:44
@Nick The values are hard coded just like you can see in the code snippet and there is no backend code just html,css and alittle js — , Aug 15 '18 at 14:57
I think I misunderstood. Do you only want a continuous animation, i.e. fake values, not measuring the progress of some real state? Maybe you should search for CSS attribute `animation-iteration-count: infinite` or generally find out more about CSS keyframe animation to customise the animation. Example: https://codepen.io/jguerralla/pen/gKWWbO — Nick, Aug 15 '18 at 15:04
@Nick What I need is for the progress bar to be animated only when the section is visible and not when the page loads as it is currently doing — , Aug 15 '18 at 15:12
https://stackoverflow.com/questions/27462306/css3-animate-elements-if-visible-in-viewport-page-scroll — Nick, Aug 15 '18 at 15:21

score 0 · Answer 1 · answered Aug 16 '18 at 09:04

0

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>

answered Aug 16 '18 at 09:04

Ramesh

2,297
2
20
42

No what I want is for it to animate once when a user scrolls down to the section where it is – Aug 16 '18 at 14:14
You will need javascript for this. Is it ok if I come with a js solution. – Ramesh Aug 16 '18 at 14:23
No problem all I would like is assistance to make this work – Aug 16 '18 at 14:24
@Otema You can try `aos` animations for onscroll animations.CHECK THE LINK BELOW : https://github.com/michalsnik/aos – Ramesh Aug 16 '18 at 14:40

Animate a progress bar without refreshing web page

1 Answers1