How can I use Angular or jQuery, not JS, to stop this progress bar?

Question

How can I make this progress bar stop increasing once the button below is pressed? I tried a couple of different things. I would love to be able to use jQuery to make it work or angularJS but vanilla JS would be great too!

I checked some of the code online as well but it wasn't working properly. I just want the progress bar to stop increasing during the loop. I should probably use clearInterval or setInterval.
Thanks!

                
(function move(){
    var elem=document.getElementById("myBar");
    var width=1;
    var id=setInterval(frame,10);
    function frame(){
        if(width>=100){  // determine state
            clearInterval(id);
            } else{
                width++; // loop increment
                elem.style.width=width+"%";
                elem.innerHTML=width*1+"millisecs";
          }
     }
     
  function stop(){
      //need code here to stop the bar from increasing..
      
  }
     
     
})();

//jQuery.noConflict
window.onload = ()=>{
    var trt = $(".aaanndd");
    trt($("h1").toggle(4000));
        
};

  progress::-moz-progress-bar {
    color: #3fb6b2;
    background: #efefef;
}


#myProgress {
    font-style:arial;
    border-color:white;
    width:  100%
    background-color: blue;
    
}
#myBar {
    width: 1%;
    height: 30px;
    background-color: blue;
}

<!DOCTYPE html>
<html ng-app>
<head>
    
  
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    
<body>



<div class="section" position:absolute>

  
<div id="myProgress" position:absolute>
<div id="myBar"></div>
     
<h1> Timelimit Indicator</h1>
<br />
<button onclick="stop()">Stop Timer </button>

</body>
</html>

Hi Dan, you may want to check out [this question](https://stackoverflow.com/questions/3536055/stopping-a-javascript-function-when-a-certain-condition-is-met) ...remember to check for existing questions before asking. — Chaim Eliyah, Jan 11 '19 at 23:35

score 0 · Accepted Answer · answered Jan 11 '19 at 23:37

You can consider adding/removing class and some transition trick like below:

var elem = document.getElementById("myBar");
setTimeout(function(){elem.classList.add('full');},1);

/*manually stop*/
function stop() {
  elem.classList.add('stop');
}
/*stop after a period*/
setTimeout(function(){elem.classList.add('stop');},5000);

progress::-moz-progress-bar {
  color: #3fb6b2;
  background: #efefef;
}

#myProgress {
  font-style: arial;
  border-color: white;
  width: 100% background-color: blue;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: blue;
  transition: 10s all linear;
}
#myBar.full {
  width: 100%;
}

#myBar.stop {
  transition: 10000s all linear; /*big value to stop*/
  width: 100.1%; /*a different value to trigger the new transition*/
}

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

<br>
<button onclick="stop()">Stop Timer </button>

How can I use Angular or jQuery, not JS, to stop this progress bar?

1 Answers1