English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Progress bars can be used in many web pages, this article introduces the progress bar effect, the specific code is as follows:
1: css2 attribute clip implements web progress bar;
Before we implement it, let's introduce the clip property, because this property in css2.1is rarely used, so it is necessary to understand it;
Browser support level: All mainstream browsers support the clip property.
Clip property in w3The official website describes it as: By clipping elements to control the visible area of elements, by default, elements do not perform any clipping.
The syntax of 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 rule, just like the writing order of our css margin and padding.
In CSS2.1In, the <top> and <bottom> offsets specified by rect() are from the top edge of the element's box, and the <left> and <right> offsets are from the left edge of the element's box. As follows:
Let's take another simple demo,
The following CSS
p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }
The above example is in50X55px long rectangle box is line clipping, getting a dashed rectangle:
As shown below:
Now let's take a look at a progress bar demo;
The HTML code is as follows:
<h2>Demo of clipping using clip</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>
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 is an explanation of the HTML above3div, one is the element container (progress-box) is basically to highlight the border, so that the user knows100% should be how long the capacity is,
The second progress-bar is the element representing the continuously changing background color set to red,
The third one is the numeric text indicating the progress display.
To demonstrate the effect, we need a simple setInterval code in JavaScript to demonstrate the progress bar effect; as follows the setInterval code;
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++;
}
}
demo as follows effect; Use clip to implement the crop demo
Two: Use progress event (progress) to interact with the server side to implement the web page progress bar;
Progress event (progress): Defines events related to client-server communication, including the following6A progress event.
For each request, the Loadstart event is not triggered at the beginning, followed by one or more progress events, then one of the error, abort, or load events is triggered, and finally the loadend event is triggered to end.
support for5browsers that support this event are Firefox 3.5+, Safari 4+, Chrome, iOS version Safari, and Android version WebKit.
This event is triggered periodically during the browser's reception of new data. The onprogress event handler receives an event object, whose target attribute is the XHR object, but also contains three additional properties: lengthComputable, position, and totalSize. Among them, lengthComputable is a boolean value indicating whether the progress information is available, position indicates the number of bytes received, and totalSize indicates the number of bytes according to the Content-The expected number of bytes determined by the Length header of the server. With this information, we can create a progress indicator for the user. The following screenshot shows the three parameters introduced above;
The HTML code is as follows:
<h2>Demo of clipping using clip</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>
The code for interacting with the server 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 >= 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 = "Received" + event.position + " of " + event.totalSize + " bytes";
console.log(event.target);
var percentComplete = Math.round(event.loaded / event.total);
// where event.loaded represents how many bytes have been loaded so far, and event.total represents the total number of bytes to be loaded, getting 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 for just simulating, just write one arbitrarily, of course, it's not like this in actual use! I just output some 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 Demo of progress bar implementation using animation and linear gradient
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), 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:
Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously, and this website does not own the copyright, nor has it been manually edited, nor does it assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report any violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.