As barras de progresso
Uma barra de progresso pode ser usada para mostrar quanto tempo um usuário está em um processo:
Bar Progresso Básico
A classe w3-progress-container define um recipiente para a barra de progresso, eo w3-progressbar define a barra de progresso real (área "cheio"). Definir a largura da barra de progresso com a propriedade de largura CSS:
Exemplo
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:10%"></div>
</div>Tamanhos barra de progresso
Definir a largura / tamanho da barra de progresso com um valor percentual de 0 a 100%:
Exemplo
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:50%"></div>
</div>Progress Bar Colors
Por padrão, a cor da w3-progress-container é cinza claro eo w3-progressbar é cinza:
Mudar sua cor com qualquer uma das classes de cor W3.CSS:
Exemplo
<div class="w3-progress-container
w3-light-blue">
<div class="w3-progressbar
w3-blue" style="width:75%"></div>
</div>As barras de progresso arredondados
Use qualquer uma das classes w3-redondas para adicionar cantos arredondados para suas barras de progresso:
Exemplo
<div class="w3-progress-container w3-round">
<div
class="w3-progressbar w3-round" style="width:25%"></div>
</div>Etiquetas Progress Bar
Adicionar um novo elemento dentro do "w3-progressbar" para adicionar um rótulo para a barra de progresso.
Dica: Use a classe w3-center para manter sempre o rótulo centrado. Se for omitido, ele será alinhado à esquerda.
Exemplo
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:25%">
<div class="w3-center w3-text-white">25%</div>
</div>
</div>Barra de progresso dinâmica
Use JavaScript para criar uma barra de progresso dinâmico:
Exemplo
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:1%"></div>
</div>
<button class="w3-btn" 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âmico com Labels
etiqueta centrado:
Alinhado à esquerda no rótulo:
Rotular fora da barra de progresso: