Reseat progress/timer Bar

January 3, 2022

I’m trying to reset my progress bar at the bottom of the review area once the new text and logo appears, but for some reason is not resetting properly. I’ve included a line at the very beginning of the changeText function basically overwriting the width of the progress-bar back to 0% but is not working. Any feedback? 🙂

var review = new Array();
review.push("Text1");
review.push("Text2");
review.push("Text3");

var clientlogo = new Array();
clientlogo.push("");
clientlogo.push("");
clientlogo.push("");

var point = 0;

function changeText(){
  $('.progress-bar').css('width','0'); 
  $('.review').fadeOut(500, function() { $('.review').fadeIn(500).html(review[point])});
  $('.client-logo').fadeOut(500, function() { $('.client-logo').fadeIn(500).attr('src',clientlogo[point])});
  if(point < ( review.length - 1 ) ){
    point++;
  }else{
    point = 0;
  }  
  $(".progress-bar").animate({
    width: "+=100%"
  }, 7000); 
}
 
setInterval(changeText, 7000);
changeText();

.section-6 {
width: 100%;
height: 300px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: black;
color: white;
}

.client-logo {
width: 200px;
height: 100px;
}

.progress-bar {
width: 0%;
height: 5px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-6">
  <p class="review"></p>
  <img src="" class="client-logo"/>
  <div class="progress-bar"></div>
</div>

>Solution :

Your line $('.progress-bar').css('width','0'); has no visible effect because you are using a 7s setInterval and a 7s independent progress bar animation that you start on each interval tick. This means that the animation starts slightly after the tick and lasts sightly into the next tick. So what happens then is that the next tick sets the progress bar to 0 while the previous animation is still in progress and the animation corrects the 0 right away to the next animated value. That is why you don’t see the progress bar reset.

Either save references to progress bar animations and cancel them on each tick, or reduce the progress bar animation duration to something less than 7s. A duration of 6500 ms will do and it still looks fine.