[转]页面加载时，显示页面加载的进度

/// <summary>
/// 根据别人提供的JS，于是我就写成了通用的方法，并且可以根据自己的
/// 需求随意改变进度条的长度大小信息与颜色和样式，如果其他人还有更
/// 好的方法展示，希望能告诉我，一起讨论。
/// 联系QQ：260511433
/// 邮箱：luoye0732@163.com
/// --------------------------------------------------------------
/// 页面加载进度条 应用程序
/// --------------------------------------------------------------
/// Description: 页面加载进度条 应用程序
/// --------------------------------------------------------------
/// Author:tanyi 2008-6-3
/// Modify:modify 2008-6-3
/// --------------------------------------------------------------
/// </summary>

public class PagePlan
{
private string _bordercolor = "#5a667b";
private string _plancolor = "#8894a8";
private string _backgroundcolor = "#ffffff";
private string _fontcolor = "#000000";
private string _planbgcolor = "#e4e7eb";
private int _planHeight = 5;

/// <summary>
/// 初始化属性
/// </summary>
public PagePlan()
{
this._bordercolor = "#5a667b";
this._plancolor = "#8894a8";
this._backgroundcolor = "#ffffff";
this._fontcolor = "#000000";
this._planbgcolor = "#e4e7eb";
this._planHeight = 5;
}

/// <summary>
/// 边框颜色
/// </summary>
public string BorderColor
{
get { return _bordercolor; }
set { _bordercolor = value; }
}

/// <summary>
/// 进度条颜色
/// </summary>
public string PlanColor
{
get { return _plancolor; }
set { _plancolor = value; }
}

/// <summary>
/// 背景颜色
/// </summary>
public string BackGroundColor
{
get { return _backgroundcolor; }
set { _backgroundcolor = value; }
}

/// <summary>
/// 字体颜色
/// </summary>
public string FontColor
{
get { return _fontcolor; }
set { _fontcolor = value; }
}

/// <summary>
/// 进度条背景颜色
/// </summary>
public string Planbgcolor
{
get { return _planbgcolor; }
set { _planbgcolor = value; }
}

/// <summary>
/// 进度条的高度
/// </summary>
public int PlanHeight
{
get { return _planHeight; }
set { _planHeight = value; }
}

/// <summary>
/// 进度加载
/// </summary>
public void LoadPlan()
{
LoadPlan(string.Empty, 0);
}

/// <summary>
/// 进度加载
/// </summary>
/// <param name="planInfo">进度信息</param>
public void LoadPlan(string planInfo)
{
LoadPlan(planInfo, 0);
}

/// <summary>
/// 进度加载
/// 测试进度效果如下：
/// (1)在Page_Load中引用using System.Threading;
/// (2)在页面刚加载时调用PageLoadPlan();
/// (3)中间调用Thread.Sleep(10000);
/// (4)最后页面加载完调用PageUnloadPlan();
/// </summary>
/// <param name="planInfo">进度信息</param>
/// <param name="with">长度</param>
public void LoadPlan(string planInfo, int with)
{
int loaderMinWith = with < 130 ? 130 : with;
int loader_bgMinWith = loaderMinWith - 130 + 113;
int posValue = loader_bgMinWith - 35;
int planHeight = PlanHeight;
int planOutsideHeigth = planHeight + 2;

if (planInfo.Trim().Length <= 0) planInfo = "页面正在加载中 ...";

System.Text.StringBuilder htmlPlanContent = new System.Text.StringBuilder();
htmlPlanContent.Append("<script language='javaScript' type='text/javascript'>");
htmlPlanContent.Append("var t_id = setInterval(animate,20);");
htmlPlanContent.Append("var pos = 0;var dir = 2;var len = 0;");
htmlPlanContent.Append("function animate(){");
htmlPlanContent.Append("var elem = document.getElementById('progress');");
htmlPlanContent.Append("if(elem != null) {");
htmlPlanContent.Append("if (pos==0) len += dir;");
htmlPlanContent.Append("if (len>32 || pos>");
htmlPlanContent.Append(posValue);
htmlPlanContent.Append(") pos += dir;");
htmlPlanContent.Append("if (pos>");
htmlPlanContent.Append(posValue);
htmlPlanContent.Append(") len -= dir;");
htmlPlanContent.Append("if (pos>");
htmlPlanContent.Append(posValue);
htmlPlanContent.Append(" && len==0) pos=0;");
htmlPlanContent.Append("elem.style.left = pos;");
htmlPlanContent.Append("elem.style.width = len;");
htmlPlanContent.Append("}}");
htmlPlanContent.Append("function remove_loading(){");
htmlPlanContent.Append("this.clearInterval(t_id);");
htmlPlanContent.Append("var targelem = document.getElementById('loader_container');");
htmlPlanContent.Append("targelem.style.display = 'none';");
htmlPlanContent.Append("targelem.style.visibility = 'hidden';");
htmlPlanContent.Append("}");
htmlPlanContent.Append("</script>");
htmlPlanContent.Append("<style>");
htmlPlanContent.Append("#loader_container {text-align:center; position:absolute; top:40%; width:100%; left: 0;}");
htmlPlanContent.Append("#loader {font-family:Tahoma, Helvetica, sans; font-size:11.5px; color:");
htmlPlanContent.Append(FontColor);
htmlPlanContent.Append("; background-color:");
htmlPlanContent.Append(BackGroundColor);
htmlPlanContent.Append("; padding:10px 0 16px 0; margin:0 auto; display:block; width:");
htmlPlanContent.Append(loaderMinWith);
htmlPlanContent.Append("px; border:1px solid ");
htmlPlanContent.Append(BorderColor);
htmlPlanContent.Append("; text-align:left; z-index:2;}");
htmlPlanContent.Append("#progress {height:");
htmlPlanContent.Append(planHeight);
htmlPlanContent.Append("px; font-size:1px; width:1px; position:relative; top:1px; left:0px; background-color:");
htmlPlanContent.Append(PlanColor);
htmlPlanContent.Append(";}");
htmlPlanContent.Append("#loader_bg {background-color:");
htmlPlanContent.Append(Planbgcolor);
htmlPlanContent.Append("; position:relative; top:8px; left:8px; height:");
htmlPlanContent.Append(planOutsideHeigth);
htmlPlanContent.Append("px; width:");
htmlPlanContent.Append(loader_bgMinWith);
htmlPlanContent.Append("px; font-size:1px;}");
htmlPlanContent.Append("</style>");
htmlPlanContent.Append("<div id='loader_container'>");
htmlPlanContent.Append("<div id='loader'>");
htmlPlanContent.Append("<div align='center'>");
htmlPlanContent.Append(planInfo);
htmlPlanContent.Append("</div>");
htmlPlanContent.Append("<div id='loader_bg'><div id='progress'> </div></div>");
htmlPlanContent.Append("</div></div>");

System.Web.HttpContext.Current.Response.Write(htmlPlanContent.ToString());
System.Web.HttpContext.Current.Response.Flush();
}

/// <summary>
/// 进度卸载
/// </summary>
public void UnloadPlan()
{
System.Web.HttpContext.Current.Response.Write("<script language='javascript' type='text/javascript'>");
System.Web.HttpContext.Current.Response.Write("remove_loading();");
System.Web.HttpContext.Current.Response.Write("</script>");
}
}

调用方式：
protected void Page_Load(object sender, EventArgs e)
{
PagePlan plan = new PagePlan();
plan.LoadPlan();//有多个方法重载，自己可以按需求调用
//其他页面代码 ...
plan.UnloadPlan();
//去掉plan.UnloadPlan();调用方法，或者在ASPX的HTML页面的最下面加入如下代码：
//<script language='javaScript' type='text/javascript'>remove_loading();</script>
}