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
Post a Comment