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

怼烎@ 2023-06-02 09:07 11阅读 0赞

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

[![images0-cnblogs-com_blog_36987_201411_232153569212489.jpg][]][images0-cnblogs-com_blog_36987_201411_232153569212489.jpg 1]

[在线演示][images0-cnblogs-com_blog_36987_201411_232153569212489.jpg 1]      [插件下载][ProgressBar.js]

线条进度条：

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

自定义形状和路径：

您可能感兴趣的相关文章

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

本文链接：[ProgressBar.js – 漂亮的响应式 SVG 进度条][ProgressBar.js _ _ SVG][  
][Link 1]

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

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[ProgressBar.js]: http://kimmobrunfeldt.github.io/progressbar.js/
[JavaScript]: http://www.yyyweb.com/tag/javascript
[images0-cnblogs-com_blog_36987_201411_232153569212489.jpg]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/images0-cnblogs-com_blog_36987_201411_232153569212489.jpg
[images0-cnblogs-com_blog_36987_201411_232153569212489.jpg 1]: http://www.yyyweb.com/demo/inner-show/progressbarjs.html
[jQuery]: http://www.cnblogs.com/lhb25/p/amazing-jquery-effects.html
[35_ CSS3]: http://www.cnblogs.com/lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html
[8_ HTML5 _ JavaScript]: http://www.yyyweb.com/492.html
[Web _10]: http://www.cnblogs.com/lhb25/p/10-useful-web-effect.html
[12_ jQuery]: http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html
[ProgressBar.js _ _ SVG]: http://www.cnblogs.com/lhb25/p/responsive-progressbar-with-svg.html
[Link 1]: http://www.cnblogs.com/lhb25/archive/2013/04/07/ivory-a-simple-and-flexible-framework.html
[_ _ _]: http://www.cnblogs.com/lhb25/