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

/// <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%; 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; ");
        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; 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; ");
        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>
}