你的位置:首页 > 软件开发 > Java > 环形进度条(从0到100%)效果

环形进度条(从0到100%)效果

发布时间:2016-07-05 15:00:09
最近公司项目中要用到这种类似环形进度条的效果,初始就从0开始动画到100%结束。动画结果始终会停留在100%上,并不会到因为数据的关系停留在一半。 如图 代码如下 demo.html 1 <!doctype html> 2 <html lang ...

环形进度条(从0到100%)效果

最近公司项目中要用到这种类似环形进度条的效果,初始就从0开始动画到100%结束。动画结果始终会停留在100%上,并不会到因为数据的关系停留在一半。

环形进度条(从0到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 (#换成@)。

可能感兴趣文章

我的浏览记录