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 进度条插件

progressbar.js

官方网站：https://kimmobrunfeldt.github.io/progressbar.js/