ajax百分比加载特效 jQuery实现的简单百分比进度条效果示例

本文实例讲述了jQuery实现的简单百分比进度条。分享给大家供大家参考，具体如下：

一、JS Code：

var progressId = "ProgressBarID";

function setProgressBar(progress) {

if (progress) {

$("#" + progressId + " > div").css("width", String(progress) + "%");

$("#" + progressId + " > div").html(String(progress) + "%");

}

}

var i_ProgressBar = 0;

function doProgressBarLoading() {

if (i_ProgressBar > 100) {

alert("加载完毕?！！");

return;

}

if (i_ProgressBar <= 100) {

setTimeout("doProgressBarLoading()", 10);

setProgressBar(i_ProgressBar);

i_ProgressBar++;

}

}

function setProgressBarCss() {

$("#" + progressId + "").css({ "width": "300px", "height": "25px" });

$("#" + progressId + " > div").css({ "height": "25px", "background-color": "#e0e0e0", "text-align": "center" });

}

$(document).ready(function () {

setProgressBarCss();

doProgressBarLoading();

});

二、Html Code：

希望本文所述对大家jQuery程序设计有所帮助。