<div id="container"></div>
<div id="container1"></div>
#container {
  margin: 20px;
  width: 100%;
  height: 20px;
}
#container1 {
  margin: 30px auto;
  width: 20%;
  height: 100px;
}
View Compiled
// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var tuluzz = new ProgressBar.Line(container, {
  strokeWidth: 2,
  easing: 'easeInOut',
  duration: 5000,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'},
  from: {color: '#FFEA82'},
  to: {color: '#ED6A5A'},
  step: (state, bar) => {
    bar.path.setAttribute('stroke', state.color);
  }
});

tuluzz.animate(1.0);  // Number from 0.0 to 1.0


// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var tuluzz = new ProgressBar.Circle(container1, {
  strokeWidth: 6,
  easing: 'easeInOut',
  duration: 5000,
  color: '#21abe9',
  trailColor: '#f4f4f4',
  trailWidth: 1,
  svgStyle: null
});

tuluzz.animate(0.8);  // Number from 0.0 to 1.0

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/0.9.0/progressbar.min.js