码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-11-24 11:28:30      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   使用   sp   

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

 

bubuko.com,布布扣

 

在线演示      插件下载

 

线条进度条:

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

  

您可能感兴趣的相关文章

 

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

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

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

标签:style   blog   http   io   ar   color   os   使用   sp   

原文地址:http://www.cnblogs.com/lhb25/p/responsive-progressbar-with-svg.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!