进度条可以在许多web应用程序中使用。本文介绍了进度条的作用。具体代码如下：

1.css2属性剪辑实现网页进度条；

在实现之前，我们先介绍一下clip属性，因为这个属性在css2.1中很少用到，所以我们有必要了解一下；

浏览器支持：所有主流浏览器都支持剪辑属性。

w3c官方网站对Clip属性的描述如下：元素的可见区域是通过裁剪来控制的。默认情况下，元素根本不会被剪裁。

剪辑具有以下语法：xx {clip:rect(上、右、下、左)}

Rect属性需要四个值：顶部、右侧、底部和左侧。它们需要用逗号隔开。遵循顺时针旋转规则，这与css中边距和填充的书写顺序相同。

在css2.1中，rect()的顶部和底部指定的偏移量是从元素框的上边缘开始计算的，左右指定的偏移量是从元素框的左边缘开始计算的。如下所示：

我们可以再看一遍简单的演示。

以下css

p#one { clip: rect(5px，40px，45px，5px)；}

p #两个{ clip: rect(5px，55px，45px，5px)；}

上面的例子是，在一个50X55px的矩形框中，将线切开，得到带虚线的矩形：

下图：

我们现在可以看演示了；首先是进度条；

HTML代码如下：

H2使用剪辑来剪切演示/H2 div id=' progress-box ' class=' progress-box ' div id=' progress-bar ' class=' progress-bar '/div div id=' progress-text ' class=' progress-text ' 0%/div/div CSS代码如下：进度框{ position:absoluteleft:0宽度width:300px高度：60 px；border:1px固体# 000；边距-left :20 px；}.进度条{ position:absoluteleft:0top:0宽度width:300px高度：60 px；clip:rect(0px，0px，60px，0px)；背景：红色；}.progress-text { position : absolute；left:0top:0宽度width:300px高度：60 px；颜色：黑色；文本对齐：居中；线高：60 px；font-family : Georgia；font-size :2 em；font-weight : bold；}在这里，我们需要解释一下HTML3的上述三个div。一个是进度框基本上要突出边框，这样用户就可以知道100%应该是多长时间。

第二个进度条指示变化元素的背景颜色被设置为红色。

第三个是代表进度显示的数字文本。

为了演示效果，我们需要JS中一个简单的setInterval代码来演示进度条的效果；下面的setInterval代码；

var bar=document.getElementById('进度条')，text=document.getElementById('进度条-text ')；var cent=0，max=300var timer=set interval(progress fn，30)；函数progress fn(){ if(cent max){ cent=0；timer=setInterval(arguments . calleeper()，30)；}else { bar.style.clip='rect(0px，' cent 'px，60px，0px)'；text . innerhtml=math . ceil((cent/max)* 100)' % '；分；} }演示具有以下效果；使用剪辑来剪切演示

二是利用进度事件与服务器交互，实现网页进度条；

进度事件(progress) :定义了与客户端服务器通信相关的事件，并具有以下六个进度事件。

Loadstart:当接收到相应数据的第一个字节时触发。进度：在相应的接收期间连续触发。错误：当请求中出现错误时触发。中止：通过调用中止()方法终止链接时触发。加载：收到完整的对应数据时触发。Loadend:在通信完成或触发错误、中止或加载事件后触发。不是每个请求都开始触发Loadstart事件，然后是一个或多个进度事件，然后触发错误、中止或加载事件之一，最后以触发loadend事件结束。

支持前五个事件的浏览器是火狐3.5、Safari 4、Chrome、iOS的Safari和安卓的WebKit。

这个事件会在浏览器接收新数据期间周期性地触发。而进度事件处理程序会接收到一个事件对象，其目标属性是XHR对象，但包含着三个额外的属性：长度可计算、位置和总尺寸。其中长度可计算的是一个表示进度信息是否可用的布尔值，位置表示已经接收的字节数，totalSize表示根据内容-长度相应头部确定的预期字节数。有了这些信息，我们就可以为用户创建一个进度指示器了。如下截图有上面介绍的三个参数；

超文本标记语言代码如下：

氘使用夹子实现裁剪演示/H2 div id='进度框' class='进度框' div id='进度条' class='进度条'/div div id='进度-文本' class='进度-文本' 0%/div/div id='状态'/div与服务器端交互的代码如下：

var div bar=文档。getelementbyid('进度条)，div text=document。getelementbyid('进度条-text ')；var cent=0，max=300函数创建xhr(){ var xhr；如果(窗口XMLHttpRequest){//IE7，火狐、Chrome、Opera、Safari xhr的代码=new XMlhttprequest()；} else {//IE6的代码，IE5 xhr=新的ActiveX对象('微软.XMLHTTP’)；}返回xhr } var xhr=create xhr()；xhr。onload=function(){ if((xhr。状态=200 xhr。状态300)| | xhr。status==304){ alert(xhr。response text)；}else { alert('请求不成功： ' xhr。地位)；} } xhr。进行中=功能(事件){ var div状态=文档。getelementbyid(' status ')；if(事件。长度可计算){ div状态。innerhtml=' Recived '事件。事件的位置。totalsize ' bytes控制台。日志(事件。目标)；var percentComplete=数学。回合(事件。已加载/事件。合计)；//其中的事件已加载。表示当前加载了多少字节流，而事件。总计表示总共有多少字节流得到这样一个百分比，console.log(event.loaded，event.total，300 *完成百分比)；progressFn(300 * percentComplete，max)；} } xhr.open('get '，' progress.php '，true)；xhr。发送(null)；函数progressFn(中心，最大值){ if(中心，最大值){ div bar。风格。clip=' rect(0px，' cent 'px，60px，0px '；divText.innerHTML=Math.ceil((分/最大)* 100)' % ';} }PHP代码为了随便模拟下随便写一个，当然在实际使用上肯定不是这样的哦！我只是输出一个内容而已；

？服务器端编程语言（Professional Hypertext Preprocessor的缩写）标题(“内容类型：文本/纯文本”)；标题(“内容长度： 27”)；回显"一些数据";flush()；回显"一些数据";flush()；回显"一些数据";flush()；三：CSS3动画及线性渐变实现进度条演示；

超文本标记语言代码如下：

div id='正在加载-状态div id='进程/div/divCSS代码如下：

#装载状态{宽度：300 pxborder:1px固体# 669 CB8-web kit-box-shadow : 0px 2px 2px # D0D4D 6；-moz-box-shadow :0 px 2px 2px # D0D4D 6；边框半径： 10px高度：20 pxpadding: 1px } #进程{宽度： 80%；高度： 100%;边框半径： 10px背景：-网络套件-渐变（线性，0 0,0 100%,从(#7BC3FF)，颜色停止(0.5，#42A9FF)，到(# 7BC3FF))；-网络套件-动画：加载3s简易版无限大；} @-网络工具包-关键帧加载{ 0% { width : 0%；} 100% { width : 80%；}}效果如下：