圆进度条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'); } });