基于HTML5 SVG的jQuery圆形进度条动画特效

asPieProgress是一款基于HTML5 SVG的jQuery圆形进度条动画特效插件。这个圆形进度条在在初始化的时候使用jQuery来添加SVG代码，然后可以在SVG上执行进度条动画效果。它还可以用于制作倒计数效果。
分类：html5 > SVG 难易：
查看演示下载资源下载积分： 20 积分
<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基于HTML5 SVG的jQuery圆形进度条动画特效</title>
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" href="css/prelude.css">
	<link rel="stylesheet" href="css/rainbow.css">
	<link rel="stylesheet" href="css/progress.css">
	<style type="text/css">
	.demo-section{
		width: 100%;
	}
    .pie_progress {
        width: 160px;
        margin: 10px auto;
    }
    @media all and (max-width: 768px) {
        .pie_progress {
            width: 80%;
            max-width: 300px;
        }
    }
</style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header bgcolor-10">
			<h1>基于HTML5 SVG的jQuery圆形进度条动画特效 <span>A jQuery plugin that animate the pie progress</span></h1>
		</header>
		<section class="demo-section">
	        <section>
	        	<div>
                    <button id="button_start">start()</button>
                    <button id="button_stop">stop()</button>
                    <button id="button_go">go('50')</button>
                    <button id="button_go_percentage">go('50%')</button>
                    <button id="button_finish">finish()</button>
                    <button id="button_reset">reset()</button>
                </div>
	            <div class="row">
	                <div class="pie_progress" role="progressbar" data-goal="33">
	                    <div class="pie_progress__number">0%</div>
	                    <div class="pie_progress__label">New Clients</div>
	                </div>
	                <div class="pie_progress" role="progressbar" data-goal="-50" data-barcolor="#3daf2c" data-barsize="10" aria-valuemin="-100" aria-valuemax="100">
	                    <div class="pie_progress__content">Hello world</div>
	                </div>
	                <div class="pie_progress" role="progressbar" data-goal="100" aria-valuemin="0" aria-valuemax="100">
	                    <span class="pie_progress__number">0%</span>
	                </div>
	                <div class="pie_progress--slow" role="progressbar">
	                    <span class="pie_progress__number">0%</span>
	                </div>
	                <div class="pie_progress--countdown" role="progressbar">
	                    <span class="pie_progress__number">2: 00</span>
	                </div>
	                
	            </div>
	        </section>
	    </section>
	</div>
	
	<script type="text/javascript" src="js/rainbow.min.js"></script>
	<script src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="src/jquery-asPieProgress.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){
        $('.pie_progress').asPieProgress({
            namespace: 'pie_progress'
        });

        // Example with grater loading time - loads longer
        $('.pie_progress--slow').asPieProgress({
            namespace: 'pie_progress',
            goal: 1000,
            min: 0,
            max: 1000,
            speed: 200,
            easing: 'linear'
        });

        // Example with grater loading time - loads longer
        $('.pie_progress--countdown').asPieProgress({
            namespace: 'pie_progress',
            easing: 'linear',
            first: 120,
            max: 120,
            goal: 0,
            speed: 1200, // 120 s * 1000 ms per s / 100
            numberCallback: function(n){
                var minutes = Math.floor(this.now/60);
                var seconds = this.now % 60;
                if(seconds < 10) {
                    seconds = '0' + seconds;
                }
                return minutes + ': ' + seconds;
            }
        });
        $('#button_start').on('click', function(){
            $('.pie_progress').asPieProgress('start');
        });
        $('#button_finish').on('click', function(){
             $('.pie_progress').asPieProgress('finish');
        });
        $('#button_go').on('click', function(){
             $('.pie_progress').asPieProgress('go',50);
        });
        $('#button_go_percentage').on('click', function(){
            $('.pie_progress').asPieProgress('go','50%');
        });
        $('#button_stop').on('click', function(){
            $('.pie_progress').asPieProgress('stop');
        });
        $('#button_reset').on('click', function(){
            $('.pie_progress').asPieProgress('reset');
        });
    });
    </script>
</body>
</html>