.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>
,添加一个色值可清晰展现数据占总柱形条的百分比