progressbar.js
progressbar.js 介绍
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://kimmobrunfeldt.github.io/progressbar.js/
GitHub:https://github.com/kimmobrunfeldt/progressbar.js
网站描述:漂亮，实用的响应式 SVG 进度条插件