HTML5 SVG的輕量級jQuery圓形進度條插件

jquery-pie-loader.js是一款輕量級的基于HTML5 SVG的jQuery圓形進度條插件。通過該插件可以在頁面中渲染出帶動畫效果的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結構

可以使用div或figure等元素作為圓形進度條的容器。

<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

推薦閱讀：之前給大家分享過一款 簡單實用的純CSS百分比圓形進度條插件 percircle，你不需要做任何設置，只需要按該圓形進度條插件提供的標準HTML結構來編寫代碼，就可以生成一個漂亮的百分比圓形進度條。

來源：jQuery之家