Javascript and CSS3 achieve progress bar effect

Javascript and CSS3 achieve progress bar effect

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:

<H2>Crop demo with clip implementation</H2><DivID= "Progress-box"class= "Progress-box">    <DivID= "Progress-bar"class= "Progress-bar"></Div>    <DivID= "Progress-text"class= "Progress-text">0%</Div></Div>

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 we need to explain the above HTML3 Div, 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.

The effect is as follows, by constantly changing the value of the rect as follows:

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.getelem Entbyid ("Progress-text"  = 0, Max 
     = 300;var Timer  = setinterval (PROGRESSFN, 30   max) {cent  = 0;    Timer  = setinterval (Arguments.callee (), 30);  else   {Bar.style.clip  = "Rect (0p        X, "+ cent +" px,60px,0px) ";        text.innerhtml  = Math.ceil ((cent/max) * +) + "%" ;    cent  ++; }}

Demo the following effect;

Crop demo with clip implementation

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:

<H2>Crop demo with clip implementation</H2><DivID= "Progress-box"class= "Progress-box">    <DivID= "Progress-bar"class= "Progress-bar"></Div>    <DivID= "Progress-text"class= "Progress-text">0%</Div></Div><DivID= "status"></Div>

The code to interact 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, SafariXhr=NewXMLHttpRequest (); }Else{//code for IE6, IE5Xhr=NewActiveXObject ("Microsoft.XMLHTTP"); }     returnXHR;} 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 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); //where 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, 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 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");    " Some data ";    Flush ();    " Some data ";    Flush ();    " Some data ";    Flush ();? >

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

The demo and introduction of linear gradient can read this blog http://www.cnblogs.com/lhb25/archive/2013/01/30/ Css3-linear-gradient.html This is not a very convenient place to talk about.

The HTML code is as follows:

<id= "Loading-status">    <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), Color-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:

Because of the relationship between time and my recent mood is not so detailed in the middle, so please forgive me, but you can copy the code run can be known.

Javascript and CSS3 achieve progress bar effect