search

Home >Web Front-end >JS Tutorial >jquery implements simulated percentage progress bar gradient effect code_jquery

jquery implements simulated percentage progress bar gradient effect code_jquery

WBOY
WBOYOriginal
2016-05-16 15:34:441352browse

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.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Jquery calendar plug-in to create a simple calendar_jqueryNext article：Jquery calendar plug-in to create a simple calendar_jquery

Related articles

See more