jQuery插件--根据数据加载的进度动画案例

css:

        *{
            margin:;
            padding:;
        }
        @media screen and (min-width:320px){ html{font-size:12px;}}
        @media screen and (min-width:360px){ html{font-size:14px;}}
        @media screen and (min-width:400px){ html{font-size:16px;}}
        @media screen and (min-width:480px){ html{font-size:20px;}}
        @media screen and (min-width:560px){ html{font-size:24px;}}
        @media screen and (min-width:640px){ html{font-size:28px;}}
        .wrap,.circle,.percent{
            position: absolute;
            width: 4.46rem;
            height: 4.46rem;
            border-radius: 50%;
        }
        .wrap{
            /*top:10px;*/
            /*left:10px;*/
            background-color: #ccc;
        }
        .circle{
            box-sizing: border-box;
            border: 0.1785rem solid #ccc;
            clip:rect(0,4.6rem,4.6rem,2.23rem);
            /**/
        }
        .clip-auto{
            clip:rect(auto,4.6rem,4.6rem,auto);
        }
        .percent{
            box-sizing: border-box;
            top:-0.14rem;
            left:-0.14rem;
        }
        .left{
            transition:transform ease;
            border: 0.1785rem solid deepskyblue;
            clip: rect(0,2.13rem,4.6rem,0);
        }
        .right{
            border: 0.1785rem solid deepskyblue;
            clip: rect(0,4.6rem,4.6rem,2.13rem);
        }
        .wth0{
            width:;
        }
        .num{
            position: absolute;
            box-sizing: border-box;
            width: 4.1rem;
            height: 4.1rem;
            line-height: 1.07rem;
            text-align: center;
            font-size: 1.07rem;
            left: 0.1785rem;
            top: 0.1785rem;
            border-radius: 50%;
            background-color: #fff;
            z-index:;
            padding-top: 0.535rem;
        }

html:

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<article style="height: 100rem;"></article>
<div id="process1" class="wrap">
    <!--<div class="circle">-->
        <!--<div class="percent left"></div>-->
        <!--<div class="percent right wth0"></div>-->
    <!--</div>-->
    <!--<div class="num"><em>已售</em><br><span>80</span>%</div>-->
</div>
<article style="height: 10rem;"></article>
<div id="process2" class="wrap"></div>
<article style="height: 10rem;"></article>
<div id="process3" class="wrap"></div>
<article style="height: 10rem;"></article>
<div id="process4" class="wrap"></div>
<article style="height: 100rem;"></article>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script src="animate.js"></script>
<script>
//数据传入接口：

$(function() {
　　$("#process1").FnExe({
　　　　num : "80"
　　});
　　$("#process2").FnExe({
　　　　num : "60"
　　});
　　$("#process3").FnExe({
　　　　num : "90"
　　});
　　$("#process4").FnExe({
　　　　num : "20"
　　});
});

</script>
</html>

基于jQuery插件部分animate.js：

    (function($) {
        var defaults = {
            num : "0"
        };
        var settings = {};
        var $This = null;
        function FnExe(options) {
            $This = this;
            settings = $.extend(settings,defaults,options);
//            console.log(settings);
            FnCreate( this );
            FnProcess( this );
        }
        function FnCreate(th) {
            $This = th;
            var $innerCircle = $("<div class='circle'></div>");
            $innerCircle.appendTo($This);
            var $innerLeft = $("<div class='percent left'></div>");
            $innerLeft.appendTo($innerCircle);
            var $innerRight = $("<div class='percent right wth0'></div>");
            $innerRight.insertAfter($innerLeft);
            var $innerNum = $("<div class='num'><em>已售</em><br><span>"+settings.num+"</span>%</div>");
            $innerNum.insertAfter($innerCircle);
        }
        function FnProcess(th) {
            $This = th;
            function process() {
                var percent=0;
                var $num = $This.find(".num > span").text();
                var loading = null;
                loading = setInterval(function() {
                    if(percent>50) {
                        $This.find(".circle").addClass("clip-auto");
                        $This.find(".right").removeClass("wth0");
                    }
                    $This.find('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");
                    $This.find(".num > span").text(percent);
                    percent++;
                    if(percent-1 == $num) {
                        clearInterval(loading);
                    }
                },30);
            }
            var flag = true;
            console.log($This);
            var $This = $This;
            console.log($This);
            $(window).scroll(function() {
                console.log($This);
                if($This.offset().top < parseInt( $(window).scrollTop() + $(window).height() * 0.3)) {
                    if(flag) {
                        $This.one("trigger",process());
                        flag = !flag;
                    }
                }
            } );
        }
        $.fn.extend({
            FnExe : FnExe
        })
    })(jQuery);