How to reset the progress bar after it ends

Question

I've found this script for a progress bar. It runs smoothly from 100% to 0% after clicking the button. But how can I reset the progress bar after it hits the 0? I'm planning to use this script in a slideshow and it should be 100% again after it reaches 0.

Hope you can help me in the right direction.

Thnx, Leon

 document.querySelector("button").addEventListener("click", () => { document.querySelector(".progress.bar").style.transitionDuration = "10s"; document.querySelector(".progress").className += " complete"; });

 .progress { width: 50%; height: 2em; border: 1px solid black; }.bar { width: 100%; background-color: deepskyblue; color: white; text-align: center; line-height: 2em; transition-property: width; transition-timing-function: linear; }.progress.complete.bar { width: 0%; } button { margin-top: 1em; }

 <div class="progress"> <div class="bar">Loading...</div> </div> <button> Start </button>

Answer 1

You can reset the progress bar by removing the complete class.

 document.querySelector("button.start").addEventListener("click", () => { document.querySelector(".progress.bar").style.transitionDuration = "10s"; document.querySelector(".progress").className += " complete"; }); document.querySelector("button.reset").addEventListener("click", () => { let className = document.querySelector(".progress").className; if (className.indexOf(' complete') > -1) { className = className.substr(0, className.indexOf(' complete')); document.querySelector(".progress.bar").style.transitionDuration = "0s"; document.querySelector(".progress").className = className; } });

 .progress { width: 50%; height: 2em; border: 1px solid black; }.bar { width: 100%; background-color: deepskyblue; color: white; text-align: center; line-height: 2em; transition-property: width; transition-timing-function: linear; }.progress.complete.bar { width: 0%; } button { margin-top: 1em; }

 <div class="progress"> <div class="bar">Loading...</div> </div> <button class="start"> Start </button> <button class="reset"> Reset </button>

Answer 2

If you want this to be dynamic without any user interaction, you can use setTimeout, set to the same duration used in your animationDuration, within your click event Handler to reset the transition and remove the complete class.

 const start = document.querySelector("#start") const progressBar = document.querySelector(".progress.bar") const progress = document.querySelector(".progress") function resetProgressBar(){ progressBar.style.transitionDuration = "10s" progress.classList.add("complete") setTimeout(() => { progress.classList.remove("complete")// <-- remove the class with width:0 progressBar.style.transitionDuration = "0.1s" //<-- Add a very small transitionDuration or none if you prefer }, 10000)// <-- Set this timeout duration to the same as your transitionDuration } start.addEventListener("click", resetProgressBar);

 .progress { width: 50%; height: 2em; border: 1px solid black; }.bar { width: 100%; background-color: deepskyblue; color: white; text-align: center; line-height: 2em; transition-property: width; transition-timing-function: linear; }.progress.complete.bar { width: 0%; } button { margin-top: 1em; }

 <div class="progress"> <div class="bar">Loading...</div> </div> <button id="start"> Start </button>

Answer 3

For selector .progress.bar , use a listener for event transitionend , because you are using transition rules in css:

The transitionend event is fired when a CSS transition has completed.

Inside this event listener, set transitionDuration to the default value. And in the next step, remove class complete from .progress , which will return the previous width of the progress bar.

 document.querySelector("button").addEventListener("click", () => { document.querySelector(".progress.bar").style.transitionDuration = "10s"; document.querySelector(".progress").className += " complete"; }); document.querySelector(".progress.bar").addEventListener("transitionend", () => { document.querySelector(".progress.complete.bar").style.transitionDuration = ""; document.querySelector(".progress").classList.remove("complete"); });

 .progress { width: 50%; height: 2em; border: 1px solid black; }.bar { width: 100%; background-color: deepskyblue; color: white; text-align: center; line-height: 2em; transition-property: width; transition-timing-function: linear; }.progress.complete.bar { width: 0%; } button { margin-top: 1em; }

 <div class="progress"> <div class="bar">Loading...</div> </div> <button> Start </button>

Answer 4

Thnx for all your suggestions. I've implemented the last suggestion into my slideshow script.

It is running and it is refreshing after slide change. But somewhere on the ride it stops, I think it's confused when to start the progress bar.

Anyone an idea to make this more solid?

  jQuery('.owl-carousel').owlCarousel({
    
    items: 1,
    margin: 0,
    nav: false,
    dots: false,
    slideBy: 1,
    rewind: false,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplaySpeed: 10000,
    loop: true,
    animateOut: 'fadeOut',
    responsive: false,
    mouseDrag: false,
    touchDrag: false,
    lazyLoadEager: 2

  });

  jQuery('.owl-carousel').on('changed.owl.carousel', function(event) {
    document.querySelector(".progress .bar").style.transitionDuration = "5s";
    document.querySelector(".progress").className += " complete";
  })

  document.querySelector(".progress .bar").addEventListener("transitionend", () => {
    document.querySelector(".progress.complete .bar").style.transitionDuration = "5";
    document.querySelector(".progress").classList.remove("complete");

  });

.progress {
    width: 50%;
    height: 2em;
    border: 1px solid black;
}

.bar {
    width: 100%;
    background-color: deepskyblue;
    color: white;
    text-align: center;
    line-height: 2em;

    transition-property: width;
    transition-timing-function: linear;
}

.progress.complete .bar {
    width: 0%;
}

button {
    margin-top: 1em;
}

<div class="progress">
    <div class="bar">Loading...</div>
</div>

<button>
    Start
</button>