ProgressBar.js 是一个借助动态 SVG 路径的漂亮的，响应式的进度条效果。
使用 ProgressBar.js 可以很容易地创建任意形状的进度条。这个 JavaScript 库提供线条，圆形和方形等几个内置的形状，但你可使用 Illustrator 或任何其它的矢量图形编辑器创建自己的进度条效果。
线条进度条：
var line = new ProgressBar.Line('#example-line-container', {
color: '#FCB03C'
});
line.animate(1);
圆形进度条：
var circle = new ProgressBar.Circle('#example-circle-container', {
color: '#FCB03C',
strokeWidth: 2,
fill: '#aaa'
});
circle.animate(1, function() {
circle.animate(0);
})
自定义形状和路径：
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);
});
});
参数
| 类型 | 默认值 | 描述 | |
| percentage | int | null | 定义进度条的百分比数。 |
| ShowProgressCount | boolean | true | 定义是否显示百分比数值。 |
| duration | int | 1000 | 定义进度条动画的速度。默认为1000毫秒。可以使用整数值孟获关键字：slow或fast。 |
| fillBackgroundColor | string | '#3498db' | 定义进度条的背景填充色。 |
| backgroundColor | string | '#EEEEEE' | 定义进度条的背景色。 |
| radius | string | '0px' | 定义进度条的圆角。 |
| height | string | '10px' | 定义进度条的高度。 |
| width | string | '100%' |
链接: https://fly63.com/nav/1650
