首页 > 代码库 > ProgressBar.js – 漂亮的响应式 SVG 进度条
ProgressBar.js – 漂亮的响应式 SVG 进度条
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="http://www.mamicode.com/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 进度条
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
ProgressBar.js – 漂亮的响应式 SVG 进度条
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。