.progress {
height:32px;
}
.progress .progress-value {
float:left;
font-size:12px;
color:#666;
width:50px;
line-height:32px;
}
.progress .progress-bar {
float:left;
width:90px;
height:10px;
margin-top:11px;
background-color:#efefef;
animation:animate-positive 2s;
}
.progress .progress-bar .progress-data {
height:10px;
background-color:#4fb1fc;
}
@-webkit-keyframes animate-positive {
0% {
width:0%;
}
}@keyframes animate-positive {
0% {
width:0%;
}
}只需在
<div class="progress-value">22.0%</div>
打入实时百分数值,js通过此数值将宽写入
<div class="progress-data"></div>
,添加一个色值可清晰展现数据占总柱形条的百分比