How to pause/resume ProgressBar.js? - Pomodoro Clock

JavaScript
1

0
down vote
favorite

I am using ProgressBar.js for a Pomodoro clock project and I can’t figure how to pause it and keep the progress bar paused a the current value, and resume it from where it left.

I’ve been reading the doc of the library (https://progressbarjs.readthedocs.io/en/latest/api/shape/#stop), but I’m not able to figure it out.

Here is the javascript example:

var clicked = 0;

    function myFunction(){
      clicked ++
    if (clicked % 2 === 1){
    var progressCircle = new ProgressBar.Circle(circus, {
      strokeWidth: 3,
      duration: 30000,
      color: '#21abe9',
      trailColor: '#f4f4f4',
      trailWidth: 1,
      svgStyle: null,
    });

    progressCircle.animate(1)

    }
    else{
      progressCircle.animate(1).stop();
      clicked=0;
    }
    }

Here is the codepen: https://codepen.io/nico3d911/pen/qoGzvx

My almost finished Pomodoro clock can be seen here: https://codepen.io/nico3d911/pen/eVPmjq?editors=1010

Thank you!

2

progressCircle inside else scope is undefined. declare the ProgressBar object outside the condition so both if and else could reference same obj.

code 
var clicked = 0;
var progressCircle = new ProgressBar.Circle(circus, {
  strokeWidth: 3,
  duration: 30000,
  color: '#21abe9',
  trailColor: '#f4f4f4',
  trailWidth: 1,
  svgStyle: null,
})

function myFunction() {
  clicked++;
  if (clicked % 2 === 1) {
    progressCircle.animate(1);
  } else {
    progressCircle.stop();
    clicked = 0;
  }
}
1 Like
3

Yes correct! i figured it out later, by putting the variable outside any function. Also my syntax progressCircle.animate(1).stop(); was wrong!

I ditched the feature for now anyway :frowning: Every time I paused and resumed it, the progress bar resumed at the same position (which is good!), but didn’t keep up with the initial speed (duration time reset to initial value.)

Thanks for the help!