CSS3 and JavaScript to implement the progress bar effect

This article mainly introduces JAVASCRIPT+CSS3 realization progress bar effect, can realize to the user a wait process, need to be able to understand.

Progress bar in a lot of the web can be used to, this article is to introduce the progress bar effect, the specific code is as follows:

A: Css2 attribute clip implementation page progress bar;

Before we do this, let's introduce the clip property, because this property is seldom used in css2.1, so we need to get to know it;

Browser support: Clip properties are supported by all major browsers.

The clip attribute is described in the Web site as follows: by cropping the element to control the visible area of the element, the element is not clipped by default.

The syntax for clip clipping 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 in the same order as the margin,padding in our CSS.

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

We can come back to 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 line cut in the rectangular box of the 50x55px, resulting in a dashed rectangle:

Such as:

We can now start by looking 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 to explain the above HTML3 P, one is the element container (Progress-box) is 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 one 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 = 300;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++;}  }

The demo is as follows; Crop demo with clip


Second: The use of progress events (progress) and server-side interaction to achieve web page progress bar;

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


 

 
  
 
   
Loadstart: Triggered when the first byte of the corresponding data is received.
 
   
Progress: continuous triggering during the receiving period.
 
   
Error: triggered when a request error occurs.
 
   
Abort: Triggered when a link is terminated because the abort () method is called.
 
   
Load: triggered when the complete corresponding data is received.
 
   
Loadend: Triggered after communication completes or triggers an error, abort, or Load event.
 
  

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

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

This event is periodically triggered when the browser receives new data. The OnProgress event handler receives an event object whose target property is the 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 based on the content-length corresponding head. With this information, we can create a progress indicator for the user. The following are the three parameters described above;


The HTML code is as follows:




The code to interact with the server side is as follows:


var pbar = document.getElementById ("Progress-bar"), Ptext = 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 (xhr.  ResponseText);  }else {alert ("Request was unsuccessful:" + xhr.status);  }} xhr.onprogress = function (event) {var pStatus = document.getElementById ("status");      if (event.lengthcomputable) {pstatus.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 indicates how many byte streams are in total to get such a percentage, 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) {pbar.style.clip = "rect (0px," + cent + "px,60px,0px)";   ptext.innerhtml = Math.ceil ((cent/max) * 100) + "%"; }  }

PHP code in order to casually write a random, of course, in the actual use is certainly not so 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:


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

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:


The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!