html 进度条

• 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;
}

效果如下：