建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS响应式进度条插件progressbar

来源:易助科技网浏览量:16收藏

简介


ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果。使用 ProgressBar.js 可以很容易地创建任意形状的进度条。这个 JavaScript 库提供线条,圆形和方形等几个内置的形状,但你可使用 Illustrator 或任何其它的矢量图形编辑器创建自己的进度条效果。


JS响应式进度条插件progressbar-示例图




使用


1  引入 ProgressBar.js 文件


2.  调用


线条进度条:


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);});
});



相关链接


Github 地址:https://github.com/usablica/progress.js/

效果演示及文档:http://usablica.github.io/progress.js/