css:

*{
               margin: 0;            padding: 0;        }        @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:0;        }        .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: 1;            padding-top: 0.535rem;        }

html:

$(function() {

　　$("#process1").FnExe({

　　　　num : "80"

　　});

　　$("#process2").FnExe({

　　　　num : "60"

　　});

　　$("#process3").FnExe({

　　　　num : "90"

　　});

　　$("#process4").FnExe({

　　　　num : "20"

　　});

});

基于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 = $("
     
");            $innerCircle.appendTo($This);            var $innerLeft = $("
     
");            $innerLeft.appendTo($innerCircle);            var $innerRight = $("
     
");            $innerRight.insertAfter($innerLeft);            var $innerNum = $("
     
      已售
      
      "+settings.num+"%
     
");            $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);