새로운 부트 스트랩에서 진행률 표시 줄을 수직으로 만듭니다
-
26-12-2019 - |
문제
그래서 Boostrap에서 5 개의 진행률 막대가 모두 애니메이션 (페이지를로드 할 때)하지만이 코드를 강제로 만들고 싶습니다
<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>
.
사용자 정의 부스 트랩 코드
.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>
. 제휴하지 않습니다 StackOverflow