ProgressBar.js 是一个借助动态 SVG 路径的漂亮的，响应式的进度条效果。使用 ProgressBar.js 可以很容易地创建任意形状的进度条。这个 JavaScript 库提供线条，圆形和方形等几个内置的形状，但你可使用 Illustrator 或任何其它的矢量图形编辑器创建自己的进度条效果。
线条进度条：
|
1
2
3
4
5
|
var line = new ProgressBar.Line('#example-line-container', { color: '#FCB03C'});line.animate(1); |
圆形进度条：
|
1
2
3
4
5
6
7
8
9
|
var circle = new ProgressBar.Circle('#example-circle-container', { color: '#FCB03C', strokeWidth: 2, fill: '#aaa'});circle.animate(1, function() { circle.animate(0);}) |
自定义形状和路径：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var container = document.getElementById('example-custom-container');container.innerHTML = '<object id="scene" type="image/svg+xml" data="images/moon-scene.svg"></object>';var scene = document.getElementById('scene');scene.addEventListener('load', function() { var path = new ProgressBar.Path(scene.contentDocument.querySelector('#asterism-path'), { duration: 1000 }); path.animate(1, function() { path.animate(0); });}); |