jquery - Make a progress bar vertical in new bootstrap -


so have 5 progress bar in boostrap animated(when load page) make vertical code

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

this custom 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;               } 

and animation used

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

you can rotate elements in css transform: rotate

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

Comments

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -