Barras de progresso W3.CSS
Uma barra de progresso pode ser usada para mostrar o quanto um usuário está em um processo:
Barra de progresso básico
Um elemento <div> normal pode ser usado para uma barra de progresso.
A propriedade largura do CSS pode ser usada para definir a altura e a largura de uma barra de progresso.
Exemplo
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
Largura da Barra de Progresso
Altere a largura de uma barra de progresso com a propriedade largura do CSS (de 0 a 100%):
Exemplo
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
Cores da Barra de Progresso
Use as classes w3 - color para alterar a cor de uma barra de progresso:
Exemplo
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
Rótulos da Barra de Progresso
Adicione texto dentro de um elemento w3-container para adicionar um rótulo à barra de progresso.
Use a classe w3-center para centralizar o rótulo. Se omitido, será alinhado à esquerda.
Exemplo
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
Tamanho do texto da barra de progresso
Use as classes w3 - size para alterar o tamanho do texto no contêiner:
Exemplo
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Preenchimento da barra de progresso
Use as classes w3-padding para adicionar preenchimento ao contêiner.
Exemplo
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
Barras de progresso arredondadas
Use as classes w3-round para adicionar cantos arredondados a uma barra de progresso:
Exemplo
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Barra de progresso dinâmico
Use JavaScript para criar uma barra de progresso dinâmica:
Exemplo
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green"
style="height:24px;width:1%"></div>
</div>
<button class="w3-button w3-light-grey" onclick="move()">Click Me</button>
<script>
function move() {
var elem =
document.getElementById("myBar");
var width =
1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
Barra de progresso dinâmica com rótulos
Etiqueta centralizada:
Exemplo
Rótulo alinhado à esquerda:
Exemplo
Rótulo fora da barra de progresso:
Exemplo
20%
Outro exemplo (avançado):
Exemplo
Added 0 of 10 photos