最近公司项目中要用到这种类似环形进度条的效果,初始就从0开始动画到100%结束。动画结果始终会停留在100%上,并不会到因为数据的关系停留在一半。 如图 代码如下 demo.html 1 <!doctype html> 2 <html lang ...
最近公司项目中要用到这种类似环形进度条的效果,初始就从0开始动画到100%结束。动画结果始终会停留在100%上,并不会到因为数据的关系停留在一半。
如图
代码如下
demo.html
1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>demo</title> 8 <style> 9 .rad-prg{10 position: relative;11 }12 .rad-con{13 position: absolute;14 z-index: 1;15 top:0;16 left: 0;17 text-align: center;18 width:90px;19 height: 90px;20 padding: 10px;21 font-family: "microsoft yahei";22 }23 </style>24 </head>25 <body>26 <div class="prg-cont rad-prg" id="indicatorContainer">27 <div class="rad-con">28 <p>¥4999</p>29 <p>账户总览</p>30 </div>31 </div>32 <script type="text/javascript" src='/images/loading.gif' data-original="js/jquery.min.js"></script>33 <script src='/images/loading.gif' data-original="js/radialIndicator.js"></script>34 <script>35 36 $('#indicatorContainer').radialIndicator({37 barColor: '#007aff',38 barWidth: 5,39 initValue: 0,40 roundCorner : true,41 percentage: true,42 displayNumber: false,43 radius: 5044 });45 46 setTimeout(function(){47 var radObj = $('#indicatorContainer2').data('radialIndicator');48 radObj.animate(100);49 },300);50 51 </script>52 </body>53 </html>
原标题:环形进度条(从0到100%)效果
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。