Documentação e exemplos de uso das barras de progresso Bootstrap, além de barras empilhadas, backgrounds animados e rótulos.
Como funciona
Componentes de progresso são feitos com dois elementos HTML, um pouco de CSS para a largura e outros atributos. Não usamos o elemento HTML5 <progress> para garantir que você possa empilhar barras de progresso e colocar textos sobre elas.
Nós usamos o elemento com .progress como um envolto para indicar o valor máximo da barra de progresso;
Nós usamos o elemento interno com .progress-bar para indicar o progresso da barra, até então;
A .progress-bar exige um CSS inline, classe utilitária ou CSS personalizado, para definir sua largura;
A classe .progress-bar também exige o uso de alguns atributos role e aria para fazê-lo acessível.
Junte tudo isso e consiga o seguinte:
Bootstrap provê um punhado de utilitários para definir largura. Dependendo de suas necessidades, elas podem ajudar a configurar seu progresso, rapidamente.
Rótulos
Use rótulos em suas barras de progressos, colocando texto dentro do elemento com .progress-bar.
25%
Altura
Nós só definimos um valor para altura no .progress, então, se você alterar o valor, o elemento interno .progress-bar vai se redimensionar propocionalmente, automaticamente.
Backgrounds
Use classes utilitárias de background para mudar a aparência das barras de progresso.
Múltiplas barrras
Crie várias barras de progresso, dentro de um único componente de progresso, se precisar.
Listrada
Adicione .progress-bar-striped em qualquer .progress-bar para aplicar uma listra sobre a cor de fundo, via gradiente CSS.
Listras animadas
O gradiente listrado também pode ser animado. Use .progress-bar-animated no .progress-bar para animar as listras, da direita para esquerda, via animações CSS3.