<div id="container"></div>
<div id="container1"></div>
#container {
margin: 20px;
width: 100%;
height: 20px;
}
#container1 {
margin: 30px auto;
width: 20%;
height: 100px;
}// 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.