HTML5 SVG的轻量级jQuery圆形进度条插件

当前位置:主页 > Html5库 > SVG > HTML5 SVG的轻量级jQuery圆形进度条插件
HTML5 SVG的轻量级jQuery圆形进度条插件
分享:

    插件介绍

    jquery-pie-loader.js是一款轻量级的基于HTML5 SVG的jQuery圆形进度条插件。通过该插件可以在页面中渲染出带动画效果的SVG饼状图形,适合用于制作进度显示,加载进度等效果。

    浏览器兼容性

    浏览器兼容性
    时间:2016-02-02
    阅读:
简要教程

jquery-pie-loader.js是一款轻量级的基于HTML5 SVGjQuery圆形进度条插件。通过该插件可以在页面中渲染出带动画效果的SVG饼状图形,适合用于制作进度显示,加载进度等效果。

使用方法

使用该侧边栏菜单插件需要引入jQuery、jquery-pie-loader.js以及jquery-pie-loader.css文件。

<link rel="stylesheet" href="css/jquery-pie-loader.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-pie-loader.js"></script>    
  
HTML结构

可以使用divfigure等元素作为圆形进度条的容器。

<figure id="my-item" class="svg-pie"></figure>
  
初始化插件

在页面DOM元素加载完毕之后,可以通过svgPie()方法来初始化该隐藏侧边栏插件。

$('#my-item').svgPie( options )   
  

配置参数

该圆形进度条插件有以下一些配置参数:

  • easing (string):可选参数,设置动画的easing效果,默认值为easeOutCubic
    easing: 'swing'
    
  • duration (number):可选参数,动画的持续时间,默认值为2000毫秒。
    duration: 2000
    
  • dimension (number):圆形的直径,单位像素,默认值为200像素。
    dimension: 300
    
  • percentage (number):最终的圆形进度条百分比值。
    percentage: 42
    
  • onStart (function):动画开始后的回调函数。
    onStart: function(){
        alert('The animation started')
    }
    
  • onComplete (function):动画结束后的回调函数。
    onComplete: function(){
        alert('The animation is over')
    }
    

jquery-pie-loader.js插件的github地址为:https://github.com/acezard/jquery-pie-loader