JAVASCRIPT+CSS3 implementation of progress bar effect _javascript skills

The progress bar can be used in many web, this article is to introduce the progress bar effect, the specific code is as follows:

One: Css2 property clip implement Web page progress bar;

Before implementing, let's introduce the clip property, because this property is rarely used in css2.1, so we need to understand;

Browser support: All major browsers support clip properties.

The clip attribute is described in the official website of the consortium: by cropping the element to control the viewable area of the element, the element is not trimmed by default.

The syntax for clip cropping is as follows:

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

The Rect property requires four values, top,right,bottom,left; they need to be separated by commas. Follow the clockwise rotation rules, the same as the margin,padding writing in our CSS.

In css2.1, the <top>,<bottom> specified offset of rect () is calculated from the edge of the box at the top of the element,<left>,<right> the specified offset is from the left edge of the element's box. As follows:

We can take another look at a simple demo,

The following CSS

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

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

The example above is a row cut in a rectangular box in 50x55px, with a dotted rectangle:

The following figure:

We can now look at a progress bar demo;

The HTML code is as follows:

The CSS code is as follows:

. 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;}

Here need to explain the above HTML3 Div, one is the element container (Progress-box) basically want to highlight the border, let the user know 100% should be how long capacity,

The second progress-bar is to indicate that the changing element background color is set to red,

The third is the numeric text that represents the progress display.

In order to demonstrate the effect, we need a simple JS in the SetInterval code to demonstrate the effect of the progress bar, the following setinterval code;

var bar = document.getElementById ("Progress-bar"),
   text = document.getElementById ("Progress-text");
var cent = 0,
   max =;
var timer = setinterval (PROGRESSFN,);
function Progressfn () {
  if (Cent > max) {
    cent = 0;
    Timer = setinterval (Arguments.callee ();
  } else {
    Bar.style.clip = "rect (0px," + cent + "px,60px,0px)";
    text.innerhtml = Math.ceil ((cent/max) * +) + "%";
    cent++
  }
}

Demo the following effect; Use clip to implement crop demo

Two: Using the Progress Event (progress) to interact with the server side to implement the Web page progress bar;

Progress event (Progress): Defines the events related to client server communication, with the following 6 progress events.

1. Loadstart: Triggered when the first byte of the corresponding data is received.
2. Progress: constant triggering during receiving the corresponding period.
3. Error: Triggered when an error occurs on the request.
4. Abort: Triggered when a link is terminated because of a call to the Abort () method.
5. Load: Triggers when a complete corresponding data is received.
6. Loadend: Triggered after communication completes or triggers an error, abort, or Load event.

Each request does not start with the triggering of the Loadstart event, followed by one or more progress events, and then triggers one of the error, abort, or load events, finally triggering the end of the Loadend event.

Browsers that support the top 5 events are Firefox 3.5+, Safari 4+, Chrome, iOS version safari, and Android version WebKit.

This event is periodically triggered when the browser receives new data. The OnProgress event handler receives an event object whose target property is a Xhr object, but contains three additional attributes: Lengthcomputable, Position, and totalsize. Where Lengthcomputable is a Boolean value that indicates whether progress information is available, position represents the number of bytes that have been received, and totalsize represents the expected number of bytes determined according to the content-length corresponding headers. With this information, we can create a progress indicator for the user. The screenshot below has three parameters described above;

The HTML code is as follows:

The code for interacting with the server side is as follows:

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 >= && xhr.status <) | | xhr.status = = 304) {Alert (XH
  R.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); The event.loaded indicates how many byte streams are currently loaded, and Event.total says how many words a total number of bytes have been given such aPercentage, Console.log (event.loaded, Event.total, PercentComplete);
   PROGRESSFN (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 code in order to casually simulate a random write a, of course, in the actual use of certainly not such oh! I just output a content;

<?php
  Header ("Content-type:text/plain");
  Header ("content-length:27");
  echo "Some data";
  Flush ();
  echo "Some data";
  Flush ();
  echo "Some data";
  Flush ();
? >

Three: CSS3 animation and linear gradient implementation progress bar demo;

The HTML code is as follows:

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

The CSS code is as follows:

#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), CO Lor-stop (0.5, #42A9FF), to (#7BC3FF));-webkit-animation:load 3s ease-out infinite;
@-webkit-keyframes Load {
  0% {
    width:0%;      
  }
  100% {
    width:80%    
  }
}

The effect is as follows: