Barras de Progresso

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

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

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

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)