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%.

Como Utilizar :
   <div class="progress">
   <div class="progress-bar" style="width:10%"></div>
   </div>

10% é o valor de exemplo que desejamos exibir no andamento do progressbar(0 a 100%).

Como o browser exibe :

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%.

Como Utilizar :
   <div class="progress" style="height:10px">
      <div class="progress-bar" style="width:40%;height:10px"></div>
   </div>

10% é o valor de exemplo que desejamos exibir no andamento do progressbar(0 a 100%).

Como o browser exibe :

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

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

Como Utilizar :
     <div style="padding-left:5px" class="container">
      <p>A barra de progresso abaixo esta indicando 70%:</p>
      <div class="progress">
          <div class="progress-bar" style="width:70%">70%</div>
      </div>
     </div>
10% é o valor de exemplo que desejamos exibir no andamento do progressbar(0 a 100%).

Como o browser exibe :

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

Como Utilizar :
        <div class="progress">
            <div class="progress-bar bg-success" style="width:20%"></div>
        </div><br>

Como o browser exibe :

Adicione a classe .progress-bar-stripped :

Como Utilizar :
   <div class="progress">
       <div class="progress-bar progress-bar-striped" style="width:40%"></div>
   </div>

Como o browser exibe :

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

Como Utilizar :
   <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
   </div>

Como o browser exibe :

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

Como Utilizar :
     <div class="progress">
      <div class="progress-bar bg-success" style="width:40%">
          ProgressBar 1 com 40% e classe successo
      </div>
      <div class="progress-bar bg-warning" style="width:10%">
          ProgressBar 2 com 10% e classe aviso
      </div>
      <div class="progress-bar bg-danger" style="width:20%">
          ProgressBar 3 com 20% e classe perigo
      </div>
     </div>

Como o browser exibe :

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

---