使用ProgressBar来实现 页面下拉 圆进度条加载带数字和百分比

圆进度条jquery-asPieProgress.min.js！点击下载：jquery-asPieProgress.min.js

HTML：
<ul>
    <li class="wow fadeInUp">
       <div class="pie_progress" role="progressbar" data-goal="45">
       <div class="pie_progress__number">0%</div>
        </div>
        <p>我们的客户再次返回购买网站<br/>老客户日益增加</p>
    </li>
    <li class="wow fadeInUp">
       <div class="pie_progress" role="progressbar" data-goal="65">
       <div class="pie_progress__number">0%</div>
       </div>
       <p>多数企业选择我们来构建第一<br/>个品牌网站</p>
    </li>
    <li class="wow fadeInUp">
       <div class="pie_progress" role="progressbar" data-goal="98">
       <div class="pie_progress__number">0%</div>
       </div>
       <p>对我们网站的综合评价和网站<br/>体验的满意度</p>
    </li>
    <li class="wow fadeInUp">
       <div class="pie_progress" role="progressbar" data-goal="25">
       <div class="pie_progress__number">0%</div>
       </div>
       <p>多数客户购买2个或者更多我们<br/>的网站模板</p>
    </li>
    <li class="wow fadeInUp">
       <div class="pie_progress" role="progressbar" data-goal="100">
       <div class="pie_progress__number">0%</div>
       </div>
       <p>网站SEO优化上百度和其他搜索<br/>引擎收录排名第一页</p>
    </li>
 </ul>

css：
.plate-page .page-list ul li{width: 20%;float: left;text-align: center;}
.plate-page .page-list ul li p{font-size:14px;color:#fff;padding-top:25px;}
.plate-page .page-list .pie_progress{width: 140px;margin:0 auto;}
.plate-page .pie_progress {text-align: center;position: relative;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}
.pie_progress svg {margin: 0 auto;}
.pie_progress__content,.pie_progress__number,.pie_progress__label,.pie_progress__icon {
  width: 100%;position: absolute;top: 50%;left: 0;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);transform: translateY(-50%);}
.pie_progress__number {color:#fff;font-size: 30px;font-family:'Arial';font-weight:bold;}
.pie_progress__svg {display: inline-block;position: relative;width: 100%;padding-bottom: 100%;vertical-align: middle;overflow: hidden;}
.pie_progress__svg svg {display: inline-block;position: absolute;top: 0;left: 0;}

JS:

//圆形进度条初始化
$('.pie_progress').asPieProgress({
    namespace: 'pie_progress', //class
    barsize: '8', // 边框大小
    speed: 10, //加载熟读
    barcolor: '#ffffff', //默认边框颜色
    trackcolor: '#46bbff' //进度条颜色
});
//距离多少开始加载
$(window).scroll(function () {
    var off = parseInt($(".case-title").offset().top),
    scr = $(document).scrollTop();
if (scr > off && $('.pie_progress').data("yes") != 1) {
    $('.pie_progress').data("yes",1);
    $('.pie_progress').asPieProgress('start');
  }
});