好用的jQuery工作进度条

对于进度条，在HTML5下有个新标签就是用来呈现任务的进度，鉴于目前很多旧式浏览器还不完全支持HTML5，大家都喜欢用javascript和css实现进度条的功能。上周我在做OA里面的任务管理时，通过比较jQuery UI自带的[URL=http://jqueryui.com/progressbar]progress bar[/URL]还有jQuery easyui中的[URL=http://www.jeasyui.com/documentation/progressbar.php]progress bar[/URL]，发现都不太符合我的需求，最后找到一个特别简单的实现，只需几行代码即可，读懂英文的看这里[URL=http://workshop.rs/2012/12/animated-progress-bar-in-4-lines-of-jquery/]ANIMATED PROGRESS BAR IN 4 LINES OF JQUERY[/URL]，也可以看GitHub上的网址：[URL=https://github.com/kopipejst/progressbar]https://github.com/kopipejst/progressbar[/URL]

这里分享一下，我的样式表

<br/>#rateOfProgressBar {<br/>    width: 400px;<br/>    height: 22px;<br/>    border: 1px solid #ccc;<br/>    background-color: #f5f5f5;<br/>        }<br/><br/>        #rateOfProgressBar div {<br/>    height: 100%;<br/>    color: #fff;<br/>    text-align: right;<br/>    line-height: 22px; /* same as #progressBar height if we want text middle aligned */<br/>    width: 0;<br/>    background-color: #00cc33;/*#ff0000*/<br/>        }<br/>

C#页面调用的代码如下，我不喜欢把javascript的调用放在body中，于是放在jQuery的ready事件中，另外我这里的lblRateOfProgress在页面前端做一个display:none的隐藏。

<br/><script type="text/javascript"><br/>        $(document).ready(function () {<br/><br/>            progress($("#lblRateOfProgress").text()*100, $('#rateOfProgressBar'));<br/>        });<br/>function progress(percent, $element) {<br/><br/>    var progressBarWidth = percent * $element.width() / 100;<br/><br/>    $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");<br/><br/>}<br/>    </script><br/>