Barra de Progresso Bootstrap 5

Barra de progresso básica

A barra de progresso pode ser usada para mostrar o progresso do usuário em algum processo.

Para criar uma barra de progresso padrão, adicione .progress Adicione a classe ao elemento contêiner e defina .progress-bar Adicione a classe ao elemento filho. Use a propriedade width CSS para definir a largura da barra de progresso:

Exemplo

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

Experimente pessoalmente

Altura da barra de progresso

A altura padrão da barra de progresso é 1rem（normalmente 16px）。Use CSS height propriedade para alterá-lo.

Dica:Atenção, 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>

Experimente pessoalmente

Rótulo da barra de progresso

Adicione texto dentro da barra de progresso para exibir a porcentagem visível:

Exemplo

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

Experimente pessoalmente

Barra de progresso colorida

Por padrão, a barra de progresso é azul (principal). Use qualquer classe de fundo de contexto para alterar sua cor:

Exemplo

<!-- Azul -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>
<!-- Verde -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- Turquesa -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Laranja -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- Vermelho -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- Branco -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- Cinzento -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- Cinzento Claro -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- Cinzento Escuro -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

Experimente pessoalmente

barras de progresso com listras

Use .progress-bar-striped Use a classe para adicionar listras às barras de progresso:

Exemplo

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

Experimente pessoalmente

animação de barra de progresso

Adicione .progress-bar-animated Use a classe para criar animações de barras de progresso:

Exemplo

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

Experimente pessoalmente

Múltiplas 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%">
    Espaço livre
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    AVISO
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    DANGER
  </div>
</div>

Experimente pessoalmente