LOCAWEB STYLE

Documentação Locaweb Style

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.

5 de 10
<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>