在网上查阅了很多相关资料，参照对比一番后自己整理了一下，做了个小例子。能够实现根据后台数据加载的进度在前台动态更新进度条、进度条在页面居中显示、在进度条内显示百分比，完成进度后隐藏进度条。个人感觉还是有一定的参考价值，贴出来先。

建立一个WEB工程，添加新项->HTML页面，命名为ProgressBar.htm，内容如下：

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

>

hNp hS0

<

html 

xmlns

="http://www.w3.org/1999/xhtml"

 id

="mainWindow"

>

ITPUB个人空间8Be,PwEX:a#_

<

head

>

ITPUB个人空间kRR,@5fX3MV+@m7H*m

    

<

title

>

无标题页

</

title

>

ITPUB个人空间%Y,fD\6u

    

<

script 

language

="javascript"

>

t*\i6v Jc6av0        

function

 SetPorgressBar(pos)ITPUB个人空间j8T!GAuj:l/_j%j

        {

ITPUB个人空间.h&RQ Y8rq8t h!e+FP

            

//

设置进度条居中

G+Cr:dcdA;\4TkQ0

            

var

 screenHeight 

=

 window[

"

mainWindow

"

].offsetHeight;

S[7w;?.aeh0            

var

 screenWidth 

=

 window[

"

mainWindow

"

].offsetWidth;ITPUB个人空间~-X V`8M

            ProgressBarSide.style.width 

=

 Math.round(screenWidth 

/ 

2

);ITPUB个人空间 b8`P h$|

            ProgressBarSide.style.left 

=

 Math.round(screenWidth 

/ 

4

);

Y"M9[Oewc0            ProgressBarSide.style.top 

=

 Math.round(screenHeight 

/ 

2

);ITPUB个人空间&eL~i1t)o/x+|&B

            ProgressBarSide.style.height 

= 

"

21px

"

;ITPUB个人空间,U+Fv"X VMV/N

            ProgressBarSide.style.display 

= 

""

;

r`7Y0o%R0             

i!hP8\N"L0            

//

设置进度条百分比                       

ITPUB个人空间.E r.PK|fZ

            ProgressBar.style.width 

=

 pos 

+ 

"

%

"

;ITPUB个人空间JP:Rki}$Hk?

            ProgressText.innerHTML 

=

 pos 

+ 

"

%

"

;ITPUB个人空间#U F^ S4k1S7f1B

        }

-N+`2vL%]#qC0

8@!Q6K-l/a;G0        

//

完成后隐藏进度条

)dF9SY,z#IT0

        

function

 SetCompleted()ITPUB个人空间3j#_#fY%aJ+EMcj

        {       

#Qk Usl]i0            ProgressBarSide.style.display 

= 

"

none

"

;

.D2W!bD^"bz,e0        }ITPUB个人空间#EB$KYt)n(_

     

</

script

>

  

;[q9Y,]w3Z6V+kk0

</

head

>

ITPUB个人空间#rVY nX.r

    

<

body

>

}%G/FI-Xb;f0    

<

div 

id

="ProgressBarSide"

 style

="position:absolute;height:21x;width:100px;color:Silver;border-width:1px;border-style.:Solid;display:none"

>

9OP4W4_'QYIV'R0M0        

<

div 

id

="ProgressBar"

 style

="position:absolute;height:21px;width:0%;background-color:#3366FF"

></

div

>

(j7W}W*C-E0        

<

div 

id

="ProgressText"

 style

="position:absolute;height:21px;width:100%;text-align:center"

></

div

>

7M;n I"N$a&P1f;N0    

</

div

>

+zp6RZ IO}5Jl!W0    

</

body

>

7wo;U ~1_0

</

html

>

后台，Default.aspx.cs：

using

 System;

gs(o a4v/Y(a:_.A0

using

 System.Data;

,O N'Uf/Dl R0

using

 System.Configuration;ITPUB个人空间.wA(l6k gF6_RuO6}

using

 System.Web;

%}@i8@O4Uy:W0

using

 System.Web.Security;

q"@ w2~2OT*~0

using

 System.Web.UI;

LZ/~ b0K!H2iq0

using

 System.Web.UI.WebControls;ITPUB个人空间C*V2Pt:X}3z

using

 System.Web.UI.WebControls.WebParts;ITPUB个人空间.x;d~8vF

using

 System.Web.UI.HtmlControls;ITPUB个人空间e]9S0pQ

using

 System.Threading;ITPUB个人空间OZ [ atYM

using

 System.IO;

^.k LZxc$CRpFe.C8a0

u{/~9D7t0a~0

public 

partial 

class

 _Default : System.Web.UI.Page 

/~ rh6f#?X8r0{

u K$^1d#k}&s0    

private 

void

 beginProgress()ITPUB个人空间~"v0k-t1Z0v8@

    {

Rk?.Gz(pV+R0        

//

根据ProgressBar.htm显示进度条界面

MY KE I0

        

string

 templateFileName 

=

 Path.Combine(.MapPath(

"

.

"

), 

"

ProgressBar.htm

"

);

],kRqt`kz8Y-x0        StreamReader reader 

= 

new

 StreamReader(@templateFileName,System.Text.Encoding.GetEncoding(

"

GB2312

"

));ITPUB个人空间 { n]4z I%]3@q

        

string

 html 

=

 reader.ReadToEnd();ITPUB个人空间GIo5E7t){-C

        reader.Close();ITPUB个人空间;?%_$dE1hQkTc

        Response.Write(html);

\+Y2w+|J"w0        Response.Flush();

EBw W hL0    }

0J:E$~V3~ F A0

c mM-XSA/~0    

private 

void

 setProgress(

int

 percent)

:Y/MB'eJ*|&^`0    {

ITPUB个人空间 iv So0W6M+n M4@

        

string

 jsBlock 

= 

"

<script>SetPorgressBar('

" 

+

 percent.ToString() 

+ 

"

'); </script>

"

;ITPUB个人空间H Y^U{N|)X/k}}

        Response.Write(jsBlock);ITPUB个人空间Vhku,U` }m

        Response.Flush();

-Jr8a#H H`(C0    }ITPUB个人空间|up%fj7H

8N/T6cD~#BK0    

private 

void

 finishProgress()

t*w*mvV#f0    {

? Fo_-X0        

string

 jsBlock 

= 

"

<script>SetCompleted();</script>

"

;

i:t3_ WWX%zU!N0        Response.Write(jsBlock);

~JT5|]!J0        Response.Flush();

g0\Df"ZGb0    }

3JZ0xm7[.r0@$Ar'h0

+T jRF%G f0    

private 

void

 Page_Load(

object

 sender, System.EventArgs e) ITPUB个人空间8SG2N'~_4N/An#}"D

    {

#T |5h$c0~T)e dA0        beginProgress();ITPUB个人空间k4dB8a;r#d

.LQ a5[$r}7F0        

for

 (

int

 i 

= 

1

; i 

<= 

100

; i

++

)ITPUB个人空间v0BBi,R[&d2@ i {] p

        {

ITPUB个人空间{ m-a.p~ NJ!N4d

            setProgress(i);ITPUB个人空间 y*zf*X8QA:u9c T

}9[7kR5oP3x0_0            

//

此处用线程休眠代替实际的操作，如加载数据等

ITPUB个人空间+mC:b&G!Wk

            System.Threading.Thread.Sleep(

50

);ITPUB个人空间N;~1e/w(hA

        }ITPUB个人空间EU\,PZQ.t!sM

B0uv.KyA s~:r&|0}0        finishProgress(); 

5\hX7c i${o0    } 

!k.o9?6YF8i0}

前台页面代码在此省略，可以放置任意控件。

转自：http://blog.csdn.net/reonlyrun/archive/2006/12/27/1464372.aspx