zoukankan      html  css  js  c++  java
  • 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);
        });
    });
  • 相关阅读:
    OO第三次阶段性总结
    OO第二次阶段性总结
    OO第一次阶段性总结
    【软工】提问回顾与个人总结
    【软工】结对编程作业
    【软工】第一次阅读作业
    【软工】第0次个人作业
    oo作业总结(四)
    OO作业总结(三)
    oo作业总结(二)
  • 原文地址:https://www.cnblogs.com/sunshinelaila/p/4119367.html
Copyright © 2011-2022 走看看