程序效果如下
实现进度条动画主要有两种方法：（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