html boostrap4纵向进度条
增加了自定义的纵向css样式
主要内容
<style>
.progress-bar-vertical {
30%;
/* min-height: 100px; */
float: left;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
align-items: flex-end;
-webkit-align-items: flex-end; /* Safari 7.0+ */
}
.progress-bar-vertical .progress-bar {
100%;
height: 0;
-webkit-transition: height 0.6s ease;
-o-transition: height 0.6s ease;
transition: height 0.6s ease;
}
</style>
<body>
<div class="content-body-map-boat-status-bar d-flex col-4">
<div class="bar-0 col-3 d-flex flex-column">
<span>0℃</span>
<div class="d-flex justify-content-center">
<div class="progress progress-bar-vertical">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 20%;">
</div>
</div>
</div>
<span>指标1</span>
</div>
<div class="bar-0 col-3 d-flex flex-column">
<span>0kPa</span>
<div class="d-flex justify-content-center">
<div class="progress progress-bar-vertical">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="height: 0;">
</div>
</div>
</div>
<span>指标2</span>
</div>
<div class="bar-0 col-3 d-flex flex-column">
<span>60%</span>
<div class="d-flex justify-content-center">
<div class="progress progress-bar-vertical">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%;">
60%
</div>
</div>
</div>
<span>指标3</span>
</div>
<div class="bar-0 col-3 d-flex flex-column">
<span>70%</span>
<div class="d-flex justify-content-center">
<div class="progress progress-bar-vertical">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 70%;">
70%
</div>
</div>
</div>
<span>指标4</span>
</div>
</div>
<div class="col-8">
</div>
</body>