The example in this article describes the jquery code to simulate the gradient effect of the percentage progress bar. Share it with everyone for your reference, the details are as follows:
The code has been processed here so that you can easily see the loading percentage. This is not necessary in actual use.
The screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51.net/js/2015/jquery-mn-bfb-scroll-cha-style-demo/
The specific code is as follows:
<html>
<head>
<title>jquery模拟百分比进度条</title>
<script type='text/javascript' src='jquery1.3.2.js'></script>
<style>
#loading{ background:url(bak.png) 0 0 no-repeat; width:397px; height:49px;}
#loading div{ background:url(pro.png) 0 0 no-repeat; line-height:49px;height:49px; text-align:right;}
</style>
<script type="text/javascript">
var progress_id ="loading";
function SetProgress(progress) {
if (progress) {
$("#" + progress_id +" > div").css("width",String(progress) + "%"); //控制#loading div宽度
$("#" + progress_id +"> div").html(String(progress) + "%"); //显示百分比
}
}
var i = 0;
function doProgress() {
if (i > 100) {
$("#message").html("恭喜您，歌曲上传成功！").fadeIn("slow");//加载完毕提示
return;
}
if (i <= 100) {
setTimeout("doProgress()",500);
SetProgress(i);
i++;
}
}
$(document).ready(function() {
doProgress();
});
</script>
</head>
<body>
<div id="message"></div>
<div id="loading"><div>
</body>
</html>I hope this article will be helpful to everyone in jQuery programming.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
