Progressbar.js is fully responsive supported and lightweight jQuery plugin for animated progress bars. Some predefined shapes(Line, Circle and SemiCircle) are included within this plugin and anyone can use these shapes easily. Besides these shapes, it supports any types of SVG custom shapes and also animates the custom shapes smoothly.
1. Include the Javascript progressbar.min.js at the bottom of the web page.
<script src="path/to/progressbar.min.js"></script>2. Add the basic HTML to the page.
<div id="container"></div>3. Initialize the plugin and we're ready to go.
var bar = new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'}
});
bar.animate(1.0); // Number from 0.0 to 1.0<div class="basicLine"></div><div class="basicLine2"></div><div class="basicLine3"></div>var basicLine = new ProgressBar.Line($('.basicLine')[0], {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#9c9fff',
trailColor: '#c5c5c5',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'}
});
basicLine.animate(1.0);var basicLine2 = new ProgressBar.Line($('.basicLine2')[0], {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#9c9fff',
trailColor: '#c5c5c5',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 100) + ' %');
}
});
basicLine2.animate(1.0);var basicLine3 = new ProgressBar.Line($('.basicLine3')[0], {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#9c9fff',
trailColor: '#c5c5c5',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
from: {color: '#9c9fff'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.path.setAttribute('stroke', state.color);
}
});
basicLine3.animate(1.0);<div class="circle"></div><div class="circle2"></div><div class="circle3"></div>var circle = new ProgressBar.Circle($('.circle')[0], {
strokeWidth: 6,
easing: 'easeInOut',
duration: 1400,
color: '#9c9fff',
trailColor: '#c5c5c5',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'}
});
circle.animate(1.0);var circle2 = new ProgressBar.Circle($('.circle2')[0], {
strokeWidth: 6,
easing: 'easeInOut',
duration: 1400,
color: '#9c9fff',
trailColor: '#c5c5c5',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 100) + ' %');
}
});
circle2.animate(1.0);var circle3 = new ProgressBar.Circle($('.circle3')[0], {
strokeWidth: 6,
easing: 'bounce',
duration: 1400,
color: '#9c9fff',
trailColor: '#c5c5c5',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
from: {color: '#9c9fff'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.path.setAttribute('stroke', state.color);
}
});
circle3.animate(1.0);<div class="semiCircle"></div><div class="semiCircle2"></div>var semiCircle = new ProgressBar.SemiCircle($('.semiCircle')[0], {
strokeWidth: 6,
easing: 'bounce',
duration: 1400,
color: '#9c9fff',
trailColor: '#c5c5c5',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
from: {color: '#9c9fff'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.path.setAttribute('stroke', state.color);
}
});
semiCircle.animate(1.0);var semiCircle2 = new ProgressBar.SemiCircle($('.semiCircle2')[0], {
strokeWidth: 6,
easing: 'easeInOut',
duration: 1400,
color: '#9c9fff',
trailColor: '#c5c5c5',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 100) + ' %');
}
});
semiCircle2.animate(1.0);<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
<path fill-opacity="0" stroke-width="1" stroke="#bbb" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923 C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 C99.387,33.883,93.598,19.539,81.495,13.923z"/>
<path id="heart-path" fill-opacity="0" stroke-width="3" stroke="#ED6A5A" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923 C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 C99.387,33.883,93.598,19.539,81.495,13.923z"/>
</svg>var custom = new ProgressBar.Path($('#heart-path')[0], {
easing: 'easeInOut',
duration: 1400
});
custom.animate(1.0);