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',
stroke Width: 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 进度条 插件
progressbar.js官方网站
官方网站： https://kimmobrunfeldt.github.io/progressbar.js/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。