详解JS+CSS3实现进度条：Clip裁剪、Progress事件与CSS3动画

进度条在各类Web应用中十分常见，本文通过具体代码演示几种实现方式。

利用CSS2 clip属性实现进度条

第一种方法：利用CSS2的clip属性实现网页进度条。

在动手实现之前，有必要先了解clip属性，因为该属性在CSS2.1规范中较少被提及。

目前所有主流浏览器均支持clip属性。

根据W3C官网描述，clip属性用于通过裁剪元素来控制其可视区域，默认情况下元素不进行任何裁剪。

Clip裁剪的语法格式如下：

.xx {clip:rect(<top>, <right>, <bottom>, <left>)}

Rect属性需要四个数值参数：top、right、bottom和left，各参数间以逗号分隔。其排列顺序遵循顺时针旋转规则，与CSS中margin和padding的书写顺序一致。

在CSS2.1规范中，rect()函数的<top>和<bottom>指定的是从元素盒子顶部边缘开始的偏移量，而<left>和<right>指定的是从元素盒子左侧边缘开始的偏移量。参考如下示意图：

利用CSS2 clip属性实现进度条

我们可以先通过一个简单的示例来观察效果。

对应的CSS代码如下：

p#one { clip: rect(5px, 40px, 45px, 5px); }

p#two { clip: rect(5px, 55px, 45px, 5px); }

上述示例在一个50x55像素的矩形容器中进行剪切，最终呈现出虚线长方形的视觉效果。

具体效果如下图所示：

利用CSS2 clip属性实现进度条

接下来，我们基于clip属性制作一个进度条演示。

HTML结构代码如下：


<h2>使用clip实现裁剪demo</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样式代码如下：


.progress-box{position:absolute;left:0;width:300px;height:60px;border:1px solid #000;margin-left:20px;}
.progress-bar{position:absolute;left:0;top:0;width:300px;height:60px;clip:rect(0px,0px,60px,0px);background:red;}
.progress-text{position:absolute;left:0;top:0;width:300px;height:60px;color:Black;text-align:center; line-height:60px; font-family:Georgia;font-size:2em;font-weight:bold;}

此处需解释HTML中的三个div元素：第一个div（progress-box）作为容器，主要作用是显示边框，让用户直观了解100%进度对应的容量长度；

第二个div（progress-bar）用于表示不断变化的背景色，此处设置为红色；

第三个div用于显示进度数值文本。

为了演示动态效果，我们需要使用JavaScript中的setInterval函数来驱动进度条更新，相关代码如下：


var bar = document.getElementById("progress-bar"),
   text = document.getElementById("progress-text");
var cent = 0,
   max = 300;
var timer = setInterval(progressFn, 30);
function progressFn() {
  if(cent > max) {
    cent = 0;
    timer = setInterval(arguments.callee(), 30);
  }else {
    bar.style.clip = "rect(0px," + cent + "px,60px,0px)";
    text.innerHTML = Math.ceil((cent / max) * 100) + "%";
    cent++;
  }
}

使用clip属性实现裁剪的演示效果如下：

利用CSS2 clip属性实现进度条

通过progress事件与服务器交互

第二种方法：利用进度事件（progress）与服务器端交互来实现网页进度条。

进度事件（progress）定义了与客户端和服务器通信相关的事件，主要包含以下6种进度事件。

loadstart：在接收到响应数据的第一个字节时触发。
progress：在接收响应数据期间持续触发。
error：在请求发生错误时触发。
abort：因调用abort()方法而终止链接时触发。
load：在接收到完整响应数据时触发。
loadend：在通信完成，或触发error、abort、load事件后触发。

每个请求均以触发Loadstart事件开始，随后触发一个或多个progress事件，接着触发error、abort或load事件中的一个，最后以触发loadend事件结束。

支持前5个事件的浏览器包括Firefox 3.5+、Safari 4+、Chrome、iOS版Safari以及Android版WebKit。

该事件会在浏览器接收新数据期间周期性触发。onprogress事件处理程序接收到的event对象中，target属性指向XHR对象，但额外包含三个属性：lengthComputable、position和totalSize。其中，lengthComputable是一个布尔值，表示进度信息是否可用；position表示已接收的字节数；totalSize表示根据Content-Length响应头部确定的预期字节数。利用这些信息，我们可以为用户创建进度指示器。具体参数截图如下：

利用CSS2 clip属性实现进度条

HTML结构代码如下：


<h2>使用clip实现裁剪demo</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>
<div id="status"></div>

与服务器端交互的代码如下：


var divbar = document.getElementById("progress-bar"),
  divText = document.getElementById("progress-text");
var cent = 0,
  max = 300;
function createXHR(){
   var xhr;
   if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
     xhr=new XMLHttpRequest();
   }else{ // code for IE6, IE5
     xhr=new ActiveXObject("Microsoft.XMLHTTP");
   }
   return xhr;
 }
 var xhr = createXHR();
 xhr.onload = function() {
  if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
     alert(xhr.responseText);
  }else {
     alert("Request was unsuccessful: " + xhr.status);
  }
 }
 xhr.onprogress = function(event) {
  var divStatus = document.getElementById("status");
  if (event.lengthComputable) {
      divStatus.innerHTML = "Recived" + event.position + " of " + event.totalSize + " bytes";
      console.log(event.target);
      var percentComplete = Math.round(event.loaded / event.total);
      // 其中的event.loaded表示当前加载了多少字节流，而event.total表示总共有多少字节流 得到这样一个百分比，
      console.log(event.loaded, event.total, 300 * percentComplete);
      progressFn(300 * percentComplete, max);
   }
 }
    
 xhr.open("get", "progress.php", true);
 xhr.send(null); 
 function progressFn(cent,max) {
   if (cent < max) {
     divbar.style.clip = "rect(0px," + cent + "px,60px,0px)";
     divText.innerHTML = Math.ceil((cent / max) * 100) + "%";
   } 
 }

PHP代码部分为了简单模拟，随意编写了一个示例。实际使用中逻辑会更复杂，此处仅输出内容。


<?php
  header("Content-Type: text/plain");
  header("Content-Length: 27");
  echo "Some data";
  flush();
  echo "Some data";
  flush();
  echo "Some data";
  flush();
?>

CSS3动画与线性渐变实现

第三种方法：利用CSS3动画及线性渐变实现进度条演示。

HTML结构代码如下：


<div id="loading-status">
  <div id="process"></div>
</div>

CSS样式代码如下：


#loading-status {width:300px;border:1px solid #669CB8;-webkit-box-shadow: 0px 2px 2px #D0D4D6; -moz-box-shadow:0px 2px 2px #D0D4D6;border-radius: 10px;height:20px;padding: 1px;}
#process {width: 80%;height: 100%;border-radius: 10px;background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,#42A9FF), to(#7BC3FF));-webkit-animation: load 3s ease-out infinite;}
@-webkit-keyframes load {
  0% {
    width: 0%;      
  }
  100% {
    width: 80%;    
  }
}

最终效果如下：

利用CSS2 clip属性实现进度条

JavaScript与CSS3实现网页进度条的三种方案

利用CSS2 clip属性实现进度条

通过progress事件与服务器交互

CSS3动画与线性渐变实现

实用工具推荐