Cara buat vertical progress Bar di bootstrap

Untuk membuat layout progress bar menggunakan bootstrap sangat mudah namun jika progress bar yang diinginkan berbentuk vertical dan sesuai dengan keinginan sepertinya agak susah. berikut contoh menampilkan progress bar pada bootstrap.

<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="vertical-skills pull-right xs-center">
<ul class="list-inline">
<li><span class="skill" style="background: #ff0000; height: 90%;"></span><span class="title">HTML</span></li>
<li><span class="skill" style="background: #00bbff; height: 85%;"></span><span class="title">CSS</span></li>
<li><span class="skill" style="background: #9168e5; height: 75%;"></span><span class="title">PHP</span></li>
<li><span class="skill" style="background: #5ac1cf; height: 55%;"></span><span class="title">ASP</span></li>
<li><span class="skill" style="background: #f0c161; height: 83%;"></span><span class="title">JS</span></li>
</ul>
</div>
</div>
</div>
</div>

.vertical-skills {
    margin-top: 60px;
    text-align: center; }
    .vertical-skills li {
      display: inline-block;
      position: relative;
      width: 50px;
      height: 200px;
      background: #f0f0f0;
      margin: 0 10px; }
      @media (max-width: 400px) {
        .vertical-skills li {
          width: 25px; } }
      .vertical-skills li span.skill {
        position: absolute;
        animation-duration: 3s;
       animation-name: height;
        left: 0;
        right: 0;
        bottom: 0; }
      .vertical-skills li span.title {
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        bottom: -20px; }

        /* ANIMATIONS */
@keyframes height {
  0%, 100% {
    transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  }
  0% {
    height: 0;
  }
  100% {
    max-height: 100%;
  }
}