Bootstrap - Barras de progresso

Este capítulo discute sobre as barras de progresso do Bootstrap. O objetivo das barras de progresso é mostrar que os ativos estão sendo carregados, em andamento ou que há uma ação em andamento em relação aos elementos da página.

As barras de progresso usam transições e animações CSS3 para obter alguns de seus efeitos. Esses recursos não são suportados no Internet Explorer 9 e anteriores ou em versões anteriores do Firefox. O Opera 12 não oferece suporte a animações.

Barra de progresso padrão

Para criar uma barra de progresso básica -

  • Adicione um <div> com uma classe de .progress.

  • Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar.

  • Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.

Vamos ver um exemplo abaixo -

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

Barra de progresso alternativa

Para criar uma barra de progresso com estilos diferentes -

  • Adicione um <div> com uma classe de .progress.

  • Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar e classe progress-bar-* onde * poderia estar success, info, warning, danger.

  • Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.

Vamos ver um exemplo abaixo -

<div class = "progress">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </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: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Barra de progresso listrada

Para criar uma barra de progresso listrada -

  • Adicione um <div> com uma classe de .progress e .progress-striped.

  • Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar e classe progress-bar-* onde * poderia estar success, info, warning, danger.

  • Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.

Vamos ver um exemplo abaixo -

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

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

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Barra de Progresso Animada

Para criar uma barra de progresso animada -

  • Adicione um <div> com uma classe de .progress e .progress-striped. Também adicionar classe.active para .progress-striped.

  • Em seguida, dentro do <div> acima, adicione um <div> vazio com uma classe de .progress-bar.

  • Adicione um atributo de estilo com a largura expressa como uma porcentagem. Digamos, por exemplo, style = "60%"; indica que a barra de progresso estava em 60%.

Isso animará as listras da direita para a esquerda.

Vamos ver um exemplo abaixo -

<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Barra de progresso empilhada

Você pode até empilhar várias barras de progresso. Coloque as várias barras de progresso na mesma.progress para empilhá-los como visto no exemplo a seguir -

<div class = "progress">
   
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
   
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
   
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
   
</div>