LOCAWEB STYLE

Documentação Locaweb Style

Barras de Progresso

Usadas para indicar um progresso de carregamento ou ação de envio e etc.

80% Completo
80% Completo
	
60% Complete
Atributo Descrição
aria-valuenow É onde você pode guardar o valor atual do progresso.
arial-valuemin Qual é o valor mínimo com o qual a barra vai funcionar.
aria-valuemax Qual valor máximo de progresso a barra chegará.
style com propriedade width Aqui você insere a largura da barra baseando-se pelo valor aria-valuenow. Para fazer isso basta criar um script que lê esse valor no aria-valuenow e insere no width.
class="sr-only" Retirando essa classe o texto indicativo da barra passa a aparecer.

Barra de progresso com o valor percentual na lateral

Basta inserir a classe percentage-outside no elemento .progress e pronto a mágica está feita!

35%
	
35%

Barras indicações de cores

Talvez você precise de barras com cores diferentes para mostrar algum tipo de cuidado na ação que está sendo executada ou para passar algum tipo de informação para o usuário.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete
Classe Descrição
progress-bar-success Deixa a barra na cor verde, mostrando sucesso na ação.
progress-bar-info Deixa a barra azul.
progress-bar-warning Para barras amarelas, mostrando cuidado na ação.
progress-bar-danger Deixa a barra vermelha.

Barras animadas

Adicione a classe .active no elemento .progress juntamente com a classe .progress-striped para fazer as linhas animarem.

45% Complete
	
45% Complete

Vários indicadores em uma barra

Você pode colocar vários indicadores em uma mesma barra.

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
	
35% Complete (success)
20% Complete (warning)
10% Complete (danger)