ProgressBar.js – 漂亮的响应式 SVG 进度条

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

 

 

在线演示      插件下载

 

线条进度条：

?

1 2 3 4 5

var line = new ProgressBar.Line('#example-line-container', {     color: '#FCB03C' });   line.animate(1);

圆形进度条：

?

1 2 3 4 5 6 7 8 9

var circle = new ProgressBar.Circle('#example-circle-container', {     color: '#FCB03C',     strokeWidth: 2,     fill: '#aaa' });   circle.animate(1, function() {     circle.animate(0); })

自定义形状和路径：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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

　　

您可能感兴趣的相关文章

• 网站开发中很有用的 jQuery 效果【附源码】
• 分享35个让人惊讶的 CSS3 动画效果演示
• 十分惊艳的8个 HTML5 & JavaScript 特效
• Web 开发中很实用的10个效果【源码下载】
• 12款经典的白富美型 jQuery 图片轮播插件

 

本文链接：ProgressBar.js – 漂亮的响应式 SVG 进度条

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源