Сделать индикатор выполнения вертикальным в новом бутстрапе
-
26-12-2019 - |
Вопрос
Итак, у меня есть 5 индикаторов выполнения в Boostrap, все они анимируются (когда вы загружаете страницу), но я хотел бы сделать этот код вертикальным.
<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>
это собственный код Boostrap
.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;
}
и для анимации я использовал
<script type="text/javascript">
$(window).ready(function(e){
$.each($('div.progress-bar'),function(){
$(this).css('width', $(this).attr('aria-valuetransitiongoal')+'%');
});
});
</script>
Решение
Вы можете вращать элементы в CSS
с transform: rotate
#yourSelector {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
Не связан с StackOverflow