Barras de Progresso
Usadas para indicar um progresso de carregamento ou ação de envio e etc.
Mesmo esquema do Bootstrap. Inserimos apenas uma tag B dentro do div bar para mostrar a indicação de status de progresso.
Esse atributo STYLE que define a largura da barra de progresso é feito via Javascript e você precisa fazer isso dependendo da sua necessidade.
<div class="progress progress-striped active"> <div class="bar" style="width: 50%"><b>5 de 10</b></div> </div>
Classe | Descrição | Resultado |
---|---|---|
progress | É a classe padrão, sempre deve haver essa classe. |
|
progress-striped | Deixa a barra com as linhas na diagonal. |
|
active | Adicionando a classe active, as linhas da barra rolam da esquerda para direita. |
|
Vários indicadores em uma barra
Você pode colocar vários indicadores em uma mesma barra.
<div class="progress"> <div class="bar bar-success" style="width: 35%;"></div> <div class="bar bar-warning" style="width: 20%;"></div> <div class="bar bar-danger" style="width: 10%;"></div> </div>
Barra de progresso cinza
Basta adicionar a classe progress-default
, conforme o exemplo abaixo:
<div class="progress progress-default"> <div class="bar" style="width: 60%;"></div> </div> <div class="progress progress-default progress-striped"> <div class="bar" style="width: 60%;"></div> </div> <div class="progress progress-default progress-striped active"> <div class="bar" style="width: 60%;"></div> </div>