HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Barras de progresso do Bootstrap

❮ Anterior Próximo ❯

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.

Bootstrap fornece vários tipos de barras de progresso.

Uma barra de progresso padrão no Bootstrap se parece com isso:

70% concluído

Para criar uma barra de progresso padrão, adicione uma .progressclasse a um <div>elemento:

Exemplo

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

Observação: as barras de progresso não são suportadas no Internet Explorer 9 e versões anteriores (porque elas usam transições e animações CSS3 para obter alguns de seus efeitos).

Observação: para ajudar a melhorar a acessibilidade para pessoas que usam leitores de tela, você deve incluir os atributos aria-*.

Barra de progresso com etiqueta

Uma barra de progresso com um rótulo se parece com isso:

70%

Remova a .sr-onlyturma da barra de progresso para mostrar uma porcentagem visível:

Exemplo

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70%
  </div>
</div>

Barras de progresso coloridas

As classes contextuais são usadas para fornecer "significado através das cores".

As classes contextuais que podem ser usadas com barras de progresso são:

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
40% Concluído (sucesso)
50% Completo (informações)
60% concluído (aviso)
70% Completo (perigo)

O exemplo a seguir mostra como criar barras de progresso com as diferentes classes contextuais:

Exemplo

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>

Barras de progresso listradas

As barras de progresso também podem ser listradas:

40% Concluído (sucesso)
50% Completo (informações)
60% concluído (aviso)
70% Completo (perigo)

Adicione classe .progress-bar-stripedpara adicionar listras às barras de progresso:

Exemplo

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>

Barra de progresso animada

40%

Adicione classe .activepara animar a barra de progresso:

Exemplo

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40%
  </div>
</div>

Barras de progresso empilhadas

As barras de progresso também podem ser empilhadas:

Espaço livre
Aviso
Perigo

Crie uma barra de progresso empilhada colocando várias barras na mesma <div class="progress">:

Exemplo

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
    Danger
  </div>
</div>

Teste-se com exercícios

Exercício:

Adicione as classes corretas para que este código HTML se comporte como uma barra de progresso.

<div class="">
  <div class=""
    role="progressbar"
    style="width:70%">
  </div>
</div>


❮ Anterior Próximo ❯