Home > Developer > Web Develop
Read some of the Web page progress bar style information, there are many ways to achieve, for its presentation form, useful pictures, useful css2 attributes clip, useful Flash, I learned a kind, the following simple to introduce.
Properties of Css2 ClipIf you do not understand the clip property, then I will use plain English to explain that Clip:rect (0px,0px,0px,0px) has four values, the same is the clockwise direction assignment, upper right left, record the change of the element cutting method,
For example: An element div, its width:300px;height:300px; Clip:rect (0px,100px,60px,0px)
Indicates the left edge of the crop is 0px from the top of the original element;
Cut the right distance from the original left edge 100px;
The bottom edge of the cut is 60px above the original element;
The left distance from the original element element is 0px.
If you understand, then one more picture test, if the setting is Clip:rect (10px,100px,40px,5px) picture should be what it looks like? As follows
Speaking of which, I'll just think you understand, go on,
So now we're going to change the right value of the cut element so that it is equal to the width of the set, then the elements are all present.
Set the progress bar styleFor the CSS I do is still relatively low, then I would like to stick out the CSS code,
<style type= "Text/css" > #progressBox{width:300px;Height:60px;position:Absolute; Left:0;Border:1px solid #000;}#progressBar{background:Blue;Opacity:0.3;Filter:Alpha (opacity=30);width:300px;Height:60px;position:Absolute;Clip:rect (0px,0px,60px,0px); Left:0;Top:0;}#progressText{Color:Black;width:300px;Height:60px;position:Absolute; Left:0;Top:0;text-align:Center;Line-height:60px;font-family:Georgia;font-size:2em;Font-weight:Bold;}</style>
Page elements
<Body><DivID= "Progressbox"> <DivID= "ProgressBar"></Div> <DivID= "Progresstext">0%</Div></Div><inputtype= "button"value= "Start"ID= "BTN"style= "position:absolute;left:50%;top:20%;"/></Body>
Here we need to explain why there are 3 elements, one is the element container (Progressbox) is basically want to highlight the border, let the user know 100% should be how long capacity,
The second progressbar is to indicate that the changing element background color is set to light blue,
The third one is the numeric text that represents the progress display
And now all we have to do is JS script.
Because I'm not interacting with the server now, I'm using setinterval to simulate the growth factor.
Timer = SetInterval (PROGRESSFN, ten); function PROGRESSFN () { if (cent = = max) { clearinterval (timer) ; Else { = "rect (0px," + cent + "px,60px,0px)"; = Math.ceil ((cent/max) * +) + "%"; Cent+ +; } };The above JS is the right margin by changing the cut to achieve the display progress bar background color, while changing the progress text value.
XMLHttpRequest Progress event implementation before and after the interactive progress bar displayWith the progress event defined by XMLHttpRequest Second Edition, we can know the upload progress to match the progress of our page front-end to really implement the progress bar with back-end interaction.
First on the code
varXHR =NewXMLHttpRequest (); Xhr.timeout= 8000; Xhr.open (' POST ', form.action); Xhr.send (FormData); Xhr.onreadystatechange=function () { if(Xhr.readystate = = 4 && xhr.status = 200) {Console.log ("Xhr.responsetext", Xhr.responsetext); } Else{Console.log ("Xhr.statustext", Xhr.statustext); } }; Xhr.onprogress=UpdateProgress; //xhr.upload.onprogress = updateprogress; functionUpdateProgress (event) {if(event.lengthcomputable) {varPercentComplete = event.loaded/Event.total; Console.log (event.loaded, Event.total,300 *PercentComplete); PROGRESSFN (300 *PercentComplete, Max); }} xhr.ontimeout=function(Event) {alert (' Request timed out! ‘); }
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,
Then call our pre-defined PROGRESSFN () function OK, it is very convenient to feel.
Of course, besides this way, I have mentioned earlier that the matching flash to call us to implement a defined function, and so on.
The above is the small knowledge I want to share today, I have limited level, if there are errors and suggestions
I would also like to point out that if it is useful to you, please support it.
Implement Web progress bar with CSS2 attribute clip
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
