How to pause a progress bar on click?

Question

so I have set up a basic audio player with a progress bar.

So far I have a play button that makes the bar start and move, but I want to stop that progress when "Pause" is clicked, and resume when "Play" is pressed again. What would be the function for this?

My JS knowledge is pretty basic so I found this on W3schools

function move() {
    var elem = document.getElementById("myBar");   
    var width = 1;
    var id = setInterval(frame, 100);
    function frame() {
    if (width >= 100) {
        clearInterval(id);
    } else {
        width++; 
        elem.style.width = width + '%'; 
    }
    }
}

#myProgress {
    width: 100%;
    background-color: #ddd;
}

#myBar {
    width: 1%;
    height: 30px;
    background-color: #4CAF50;
}

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
    <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Play</button> 
<button>Pause</button>

You've already got the code that stops the increment in your code; on pause click, `clearInterval(id)`. — Tim Lewis, Jun 27 '19 at 14:55

User863 · Accepted Answer · 2019-06-27T15:15:20.783

4

You are searching for clearInterval(). To keep the progress bars state, make sure to also have the width defined globally. If you define the width in the function, it'll always return back to 1.

var interval;
var width = 1;

function move() {
  var elem = document.getElementById("myBar");
 
  clearInterval(interval);
  interval = setInterval(frame, 100);

  function frame() {
    if (width >= 100) {
      width = 1;
      clearInterval(interval);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}

function pause() {
  clearInterval(interval);
}

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Play</button>
<button onclick="pause()">Pause</button>

edited Jun 27 '19 at 15:15

answered Jun 27 '19 at 14:56

User863

19,346
2
17
41

1

`clearInterval(id);` But you changed `id` to `interval` – Tim Lewis Jun 27 '19 at 14:57
you can see `var interval` is declared globally – User863 Jun 27 '19 at 14:59
`"message": "Uncaught ReferenceError: id is not defined` That's what I'm referring to. I saw global declaration afterwards. – Tim Lewis Jun 27 '19 at 15:00
@TimLewis https://stackoverflow.com/questions/40005685/local-and-global-variables-inside-javascript-function – User863 Jun 27 '19 at 15:04
1

I'm not talking about global variable declaration! You still have `clearInterval(id);` in your code, but you change `var id = setInterval(...)` to `interval = setInterval(...)`. I'll edit your code so you can see what I'm referring to. It needs to be `clearInterval(interval);` – Tim Lewis Jun 27 '19 at 15:05
@TimLewis Sorry. I missed it. – User863 Jun 27 '19 at 15:08
The working is fine but I want to progress show be smooth that will makes it more better as it is. So which property of css will work here I have used transition but it does not work as expected. – Nadeem Khan Aug 31 '21 at 05:51

Omid Ranjbaran · Answer 2 · 2022-09-19T10:56:20.617

<body> 
    <div class="main_div">
    </div>
    <div class="child_main_div">
    </div>
    <button class="continue_button">Start</button>
</body>



let continue_button = document.querySelector('.continue_button');
let child_main_div = document.querySelector('.child_main_div')
let styles = window.getComputedStyle(child_main_div)


let width = 2;
let set_interval_var;
let flag_status = true;

function set_interval(func){
    set_interval_var = setInterval(func,50);
    function func(){
        if(width == 60){
            clearInterval(set_interval_var)
            continue_button.innerHTML = "Start"
            flag_status = true;
        }else{
            width++;
            child_main_div.style.width = width + '%';
        }
    }
 }


function set_interval_stop(){
    clearInterval(set_interval_var);
}


continue_button.addEventListener('click',function(){
    if(flag_status == true){
        flag_status = false;
        set_interval("mytimer")
        continue_button.innerHTML = "Pause"
        if(width == 60){
            width = 2;   
        }
    }else{
        flag_status = true;
        set_interval_stop()
        continue_button.innerHTML = "Start"
    }  
})

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Sep 22 '22 at 23:20

How to pause a progress bar on click?

2 Answers2