Para criar um progress bar default adicione a classe.progress class ao container do elemento e acione a classe progress-bar ao elemento. Utilize a propriedade width da CSS para definir o progresso :

Nos exemplos a baixo estou exibindo de 10% em 10% até chegar a 100%.












Importante : Só pode ser exibida uma barra de progresso pela div agrupadora(nível mais alto).

A altura default de um progress bar é 1rem (16px). Utilize a propriedade height da css para alterar a altura do progressbar:

Abaixo temos um progressbar com uma altura de 10px e representando 40%.

Abaixo temos um progressbar com uma altura de 20px e representando 50%.

Abaixo temos um progressbar com uma altura de 30px e representando 60%.

A barra de progresso abaixo esta indicando 70%:

Utilize qualquer classe de cor contextual para mudar a cor da barra de progresso:

Adicione a classe .progress-bar-stripped :

Adicione a classe .progress-bar-animated para animar o progressbar:

Para criar uma pilha de progress bar utilize a classe class="progress" na tag agrupadora :

Nota : No progress bar acima ficou 20% sem uso.

---