Bootstrap 4 Barras de Progresso
Barra de progresso básico
Uma barra de progresso pode ser usada para mostrar a um usuário quanto tempo ele está em um processo.
Para criar uma barra de progresso padrão, adicione uma .progressclasse a um elemento de contêiner e adicione a .progress-barclasse a seu elemento filho. Use a propriedade CSS widthpara definir a largura da barra de progresso:
Exemplo
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Altura da Barra de Progresso
A altura da barra de progresso é 16px por padrão. Use a propriedade CSS heightpara alterá-lo. Observe que você deve definir a mesma altura para o contêiner de progresso e a barra de progresso:
Exemplo
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Rótulos da Barra de Progresso
Adicione texto dentro da barra de progresso para mostrar a porcentagem visível:
Exemplo
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Barras de progresso coloridas
Por padrão, a barra de progresso é azul (primária). Use qualquer uma das classes de plano de fundo contextuais do Bootstrap 4 para alterar sua cor:
Exemplo
<!-- Blue -->
<div class="progress">
<div class="progress-bar"
style="width:10%"></div>
</div>
<!-- Green -->
<div
class="progress">
<div
class="progress-bar bg-success" style="width:20%"></div>
</div>
<!--
Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning"
style="width:40%"></div>
</div>
<!-- Red -->
<div
class="progress">
<div class="progress-bar bg-danger"
style="width:50%"></div>
</div>
<!-- White -->
<div
class="progress border">
<div
class="progress-bar bg-white" style="width:60%"></div>
</div>
<!--
Grey -->
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>
<!-- Light Grey -->
<div
class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div>
<!--
Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Barras de progresso listradas
Use a .progress-bar-stripedclasse para adicionar listras às barras de progresso:
Exemplo
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
Barra de progresso animada
Adicione a .progress-bar-animatedclasse para animar a barra de progresso:
Exemplo
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
Várias barras de progresso
As barras de progresso também podem ser empilhadas:
Exemplo
<div class="progress">
<div class="progress-bar bg-success"
style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"
style="width:20%">
Danger
</div>
</div>