Html Question posted in
Some basic documentation can be found here.

Html – JS making loop animation for a progress-bar

I have created a simple progress bar in HTML using JavaScript. The animation of this progress bar works correctly when the page is refreshed, but I want it to restart from the beginning once it completes and repeat indefinitely in a loop. However, the repetition and restart are not working properly and are not executing.

  const progressBar = document.getElementById('progressBar');

  function startProgressBarAnimation() {
progressBar.classList.remove('active');

setTimeout(() => {
  progressBar.classList.add('active');
}, 100);
  }

  startProgressBarAnimation();

  progressBar.addEventListener('transitionend', () => {
progressBar.style.transition = 'none';

progressBar.style.transform = 'translateX(100%)';
setTimeout(() => {
  progressBar.style.transition = 'transform 5s linear';
  startProgressBarAnimation();
}, 10);
  });
.progress-bar-container {
  width: 100%;
  height: 3px;
  background-color: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #ff0008, #fad0c4, #ffecd2);
  transform: translateX(100%);
  transition: transform 5s linear;
}

.progress-bar.active {
  transform: translateX(0);
}
<div class="progress-bar-container">
  <div class="progress-bar" id="progressBar"></div>
</div>
Tags:

3

Answers


  1. 0

    If you want to apply an infinite animation to an element, use CSS not JS. This is because JS should not be involved in UI concerns, where possible, and CSS is hardware accelerated so will perform orders of magnitude better than JS. It also gives you finer control over easing and other properties

    To use CSS you can use animate to define a keyframe animation which you then loop infinitely:

    .progress-bar-container {
  width: 100%;
  height: 3px;
  background-color: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #ff0008, #fad0c4, #ffecd2);
  animation: infinite-progress 5s infinite;
}

@keyframes infinite-progress {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0%); }
}
    <div class="progress-bar-container">
  <div class="progress-bar" id="progressBar"></div>
</div>
    Login or Signup to reply.
  2. 0

    You can combine setTimeout and setInterval. In each 1100 seconds you need to clean the board and schedule the progress to start anew:

    const progressBar = document.getElementById('progressBar');

  function startProgressBarAnimation() {
progressBar.classList.remove('active');

setTimeout(() => {
  //progressBar.classList.remove('active');
  progressBar.classList.add('active');
}, 100);
  setInterval(function() {
      progressBar.style.transition = "transform 0s linear";
      progressBar.classList.remove('active');
      setTimeout(function() {
          progressBar.style.transition = "transform 1s linear";
          progressBar.classList.add('active');
      }, 100);
  }, 1100);
  }

  startProgressBarAnimation();
    .progress-bar-container {
  width: 100%;
  height: 3px;
  background-color: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #ff0008, #fad0c4, #ffecd2);
  transform: translateX(100%);
  transition: transform 1s linear;
}

.progress-bar.active {
  transform: translateX(0);
}
    <div class="progress-bar-container">
  <div class="progress-bar" id="progressBar"></div>
</div>
    Login or Signup to reply.
  3. 0

    Here is the modified version of JavaScript.

    <script>
    const progressBar = document.getElementById("progressBar");

    function startProgressBarAnimation() {
        progressBar.style.transition = "none";
        progressBar.style.transform = "translateX(100%)";
        void progressBar.offsetWidth;
        progressBar.style.transition = "transform 5s linear";
        progressBar.style.transform = "translateX(0)";
    }

    startProgressBarAnimation();

    progressBar.addEventListener("transitionend", () => {
        setTimeout(() => {
            startProgressBarAnimation();
        }, 100);
    });
</script>

    There are many different methods to create a progress bar, but this approach is based on your original design.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search