- html 实现一个进度条
借助 <progress>
可以实现进度条,默认的进度条以及样式如下:
下载进度:
<progress value="22" max="100">
</progress>
html:
<div class="progress-cell">
<div class="progress-view">
<progress class="progress-bar" value="1" max="10"></progress>
<div class="progress-num">1/10</div>
</div>
</div>
css
.progress-cell {
display: flex;
flex-direction: row;
width: 100%;
height: 44px;
background: #FDFDFD;
}
.progress-view {
display: flex;
flex-direction: row;
height: 100%;
width: 80%;
background-color: bisque;
line-height: 44px;
align-items: center;
}
.progress-bar {
margin-left: 32px;
}
.progress-num {
margin-left: 16px;
font-size: 13px;
}
.view-all {
color: #0051A3;
line-height: 44px;
text-align: right;
font-size: 13px;
width: 20%;
margin-right: 32px;
}
效果如下: