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 进度条插件
progressbar.js
官方网站:https://kimmobrunfeldt.github.io/progressbar.js/
小编说
以上是编程之家为你收集整理的progressbar.js全部内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。