程序效果如下
实现进度条动画主要有两种方法:(1)使用缓动,(2)使用Jquery Animate,本文使用第二种方法,先实现代码,后续进行控件封装
<style> .jgui-processbar .loading { background-color: #22B581; height: 100%; width:0%; color:white; text-align: center; } </style> </head> <body> <div>这是进度条演示代码</div> <script type="text/javascript"> $(function() { showProcess1(); showProcess2(); }); function showProcess1() { $('#processbar1 .loading').animate({'width':'100%'},500); } function showProcess2() { $('#processbar2 .loading').animate( { 'width':'100%'}, { step:function(now,fx){ if(fx.prop=="width"){ var pos=Math.round(fx.pos*100); $('#processbar2 .loading').html(pos+'%'); } }, duration:1000}); } </script> <div class="jgui-processbar" id="processbar1" style="position:relative;width:320px;height:20px;border: #12A571 1px solid"> <div class="loading"></div> </div> <div style="margin:10px"> </div> <div class="jgui-processbar" id="processbar2" style="position:relative;width:320px;height:20px;border: #12A571 1px solid"> <div class="loading"></div> </div>
需要注意的是,div loading需要设置高度100%,因为div 默认的高度是auto,如果没有内容的话高度为0.
第一种方法单纯显示动画,第二种方法会更新进度到界面上。
写好后,发现loading宽度比父div宽度要宽,加上relative属性即可解决
<style> .jgui-processbar { position: relative; } .jgui-processbar .loading { background-color: #22B581; height: 100%; width:0%; color:white; text-align: center; position: relative; } </style>
界面演示:www.jgui.com