English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
A barra de progresso pode ser usada em muitos web, este artigo é sobre a barra de progresso, código específico como na figura a seguir:
Um: CSS2 Propriedade clip para implementar barra de progresso da web;
Antes de implementar, vamos apresentar a propriedade clip, pois essa propriedade no CSS2.1É raro usar, então é necessário entendermos;
Grau de suporte do navegador: Todos os navegadores populares suportam a propriedade clip.
A propriedade Clip no w3O site c oficialmente descreve assim: Ao cortar o elemento para controlar a área visível do elemento, por padrão, o elemento não realiza nenhum recorte.
A sintaxe de Clip é como follows:
.xx {recorte:retângulo(<top>, <right>, <bottom>, <left>)}
A propriedade Rect precisa de quatro valores, top, right, bottom, left; eles precisam ser separados por vírgula. Seguindo a regra de rotação no sentido horário, como nossa sequência de escrita de margin e padding no CSS.
No CSS2.1Em que, <top>, <bottom> especificam a quantidade de deslocamento a partir da margem superior do elemento da caixa, <left>, <right> especificam a quantidade de deslocamento a partir da margem esquerda do elemento da caixa. Como na figura a seguir:
Nós podemos ver mais um simples demo,
Como no CSS a seguir
p#one { recorte: retângulo(5px, 40px, 45px, 5px); }
p#two { recorte: retângulo(5px, 55px, 45px, 5px); }
O exemplo acima está em50X55px retângulo caixa é recorte de linha, obtendo retângulo tracejado:
Como na figura a seguir:
Nós podemos primeiramente olhar para um demo de barra de progresso;
Código HTML如下:
<h2>Using clip to implement clipping demo</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>
Código CSS如下:
.progress-box{posição:absoluta;esquerda:0;largura:300px;height:60px; borda:1px sólido #000; margem-esquerda: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;}
Precisa explicar o HTML acima3um div, um contêiner de elemento (progress-box) basicamente é para destacar a borda,100% deve ser de quanto comprimento,
segundo progress-bar é o elemento que representa a cor de fundo mudando constantemente,
o terceiro é o valor numérico de exibição do progresso.
Para demonstrar o efeito, precisamos de um código simples de setInterval em JavaScript para demonstrar o efeito da barra de progresso; conforme o código de setInterval a seguir;
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 conforme o efeito; Use clip para implementar o demo de recorte
dois: Use eventos de progresso (progress) para interagir com o servidor para implementar a barra de progresso da página da web;
Evento de progresso (progress): Define eventos relacionados à comunicação entre cliente e servidor, existem os seguintes6um evento de progresso.
Each request does not trigger the Loadstart event at the beginning, followed by one or more progress events, then trigger one of the error, abort, or load events, and finally trigger the loadend event to end.
Support for the front5The browsers that support this event are Firefox 3.5+, Safari 4+, Chrome, iOS version Safari and Android version WebKit.
This event is triggered periodically when the browser receives 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 corresponding header of Length. With this information, we can create a progress indicator for the user. The following screenshot shows the three parameters introduced above;
Código HTML如下:
<h2>Using clip to implement clipping demo</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);
// no qual event.loaded representa quantos bytes foram carregados até agora e event.total representa o total de bytes a serem carregados, obtendo assim uma porcentagem;
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 código para simular, escrevi um exemplo qualquer, claro que na prática não seria assim! Eu só estou imprimindo um conteúdo;
<?php
header("Content-Type: text/plain");
header("Content-Length: 27");
echo "Some data";
flush();
echo "Some data";
flush();
echo "Some data";
flush();
?>
Três: CSS3 Demo de progress bar com animação e gradiente linear;
Código HTML如下:
<div id="loading-status"> <div id="process"></div> </div>
Código CSS如下:
#loading-status {largura:300px;borda:1px sólido #669CB8;-webkit-caixa-sombra: 0px 2px 2px #D0D4D6; -moz-caixa-sombra:0px 2px 2px #D0D4D6;borda-raio: 10px;altura:20px;preenchimento: 1px;}
#process {largura: 80%;altura: 10-raio: 10px;background: -webkit-gradient(linear, 0 0, 0 100%, de(#7BC3FF), cor-5,#42A9FF), para(#7BC3FF));-webkit-animação: load 3s suave-out infinito;}
@-webkit-keyframes load {
0% {
largura: 0%;
}
100% {
largura: 80%;
}
}
O efeito é o seguinte:
Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao respectivo proprietário, foi contribuído e carregado voluntariamente pelos usuários da Internet. Este site não possui direitos de propriedade, não foi editado artificialmente e não assume responsabilidade por responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @) para denunciar e fornecer provas. Ao ser confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.