本文实例讲述了jquery实现模拟百分比进度条渐变效果代码。分享给大家供大家参考，具体如下：

这里为了便于看到加载百分比，对代码进行了处理，实际使用时并不需要这样。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-Mn-bfb-roll-cha-style-demo/

具体代码如下：

htmlheadtitlejquery模拟百分比进度条/title脚本类型=' text/JavaScript ' src=' jquery 1。3 .2 .js '/脚本样式#加载{后台： URL(bak。png)0 0不重复；宽度宽度：397像素高度：49 px} #正在加载div {背景： URL(pro。png)0 0不重复；行高：49 px高度：49 px向右文本对齐：}/style脚本类型=' text/JavaScript ' var progress _ id=' loading '；函数设定进度(进度){ if(进度){ $(' # ' progress _ id ' div ').css('width '，String(progress)' % ')；//控制#加载差异宽度$("#"progress _ id"div ").html(字符串(进度)"%");//显示百分比} } var I=0；函数DOP progress(){ if(I 100){ $(' # message ').html(")恭喜您，歌曲上传成功！').fadeIn('慢');//加载完毕提示返回；} if(I=100){ setTimeout(' doProgress()'，500)；设定程序；我；}}$(文档)。ready(function(){ DoProgress()；});/script/head dydiv id=' message '/div div id=' loading ' div/body/html希望本文所述对大家jQuery程序设计有所帮助。