How to increment the progress in javascript progress bar?

Question

I am trying to add a simple javascript progress bar to my website, I found a few scripts, but I always encounter the same problem - I am able to intialize the loader and set it to increment to a given value, but cannot do it in steps. Here is a simple example - https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/

At the end there is:

bar.animate(1.0);

How can i have it animated in steps? Lets say first to 50% then (after 2 secs) to 75% and then 100%. I've tried

bar.animate(0.5);
bar.animate(0.75);
bar.animate(1);

as well as:

setTimeout(function(){bar.animate(0.5)}, 2000);
setTimeout(function(){bar.animate(0.75)}, 2000);
setTimeout(function(){bar.animate(1)}, 2000);

but it always chooses the last (highest) value, instead of being animated in steps. Any advice appreicated.

jsfiddle.net/k5v2d0rr/745

DontVoteMeDown
– DontVoteMeDown

2016-10-07 16:46:22 +00:00
Commented Oct 7, 2016 at 16:46 — DontVoteMeDown
– DontVoteMeDown, Commented Oct 7, 2016 at 16:46

Brian · Accepted Answer · 2016-10-07 16:54:23Z

1

bar.animate(0.5);
bar.animate(0.75);
bar.animate(1);

The above code runs simultaneously, and the last one overrides the others.

setTimeout(function(){bar.animate(0.5); console.log("animate")}, 2000);
    console.log('timeout 1 called');
 setTimeout(function(){bar.animate(0.75); console.log("animate")}, 2000);
    console.log('timeout 2 called');
setTimeout(function(){bar.animate(1); console.log("animate")}, 2000);
    console.log('timeout 3 called');

Soon as the first timeout is set, it doesn't wait for the delay before setting the next. Check the logs on the console to see what happens.

The problem is that those scripts run simultaneously. Do something like this (or something better):

bar.animate(0.5);  // Number from 0.0 to 1.0
setTimeout(function () {
    bar.animate(0.75);
}, 2000);

setTimeout(function () {
    bar.animate(1.0);
}, 4000);

If you wanted to just animate the bar in sequences for the sake of it, you can do keyframes with CSS too.

edited Oct 7, 2016 at 16:54

answered Oct 7, 2016 at 16:45

Brian

1,91317 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brian Over a year ago

No problem, I remember being getting confused with this too. It's different than what they teach us in school with pausing the thread.

Mike Cluck · Accepted Answer · 2016-10-07 16:45:24Z

The problem is that you're, essentially, queuing up all of your steps to happen simultaneously. Instead, you want to pass a callback to the animate function so when it finishes, you can tell it to move to the next step.

// [email protected] version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {
    width: '100%',
    height: '100%'
  },
  text: {
    style: {
      // Text color.
      // Default: same as stroke color (options.color)
      color: '#999',
      position: 'absolute',
      right: '0',
      top: '30px',
      padding: 0,
      margin: 0,
      transform: null
    },
    autoStyleContainer: false
  },
  from: {
    color: '#FFEA82'
  },
  to: {
    color: '#ED6A5A'
  },
  step: (state, bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' %');
  }
});

// Keep track of the current value
var value = 0;
setTimeout(function increment() {
  value += 0.1;
  bar.animate(value, function() {
    // Animation has completed, queue up another step
    if (value < 1) {
      setTimeout(increment, 500);
    }
  });
}, 1000);

#container {
  margin: 20px;
  width: 400px;
  height: 8px;
  position: relative;
}

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container"></div>

Collectives™ on Stack Overflow

How to increment the progress in javascript progress bar?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related