Machen Sie im neuen Bootstrap einen vertikalen Fortschrittsbalken

Question

Ich habe also 5 Fortschrittsbalken in Boostrap, die alle animiert sind (beim Laden der Seite), aber ich möchte die Vertikale zum Code machen

<div class="progress progress-striped active">
    <div class="progress">
        <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="20"></div>
    </div>
</div>

<div class="progress progress-striped active">
    <div class="progress">
        <div class="progress-bar progress-bar-info six-sec-ease-in-out" aria-valuetransitiongoal="40"></div>
    </div>
</div>

Dies ist ein benutzerdefinierter Boostrap-Code

.progress .progress-bar.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;             
 }

und für die Animation habe ich verwendet

<script type="text/javascript">
  $(window).ready(function(e){
     $.each($('div.progress-bar'),function(){
       $(this).css('width', $(this).attr('aria-valuetransitiongoal')+'%');
     });
   });
</script>

Answer 1

Sie können Elemente hineindrehen CSS mit transform: rotate

#yourSelector {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}