Html
    Css
    Js

    
                        
.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%;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css进度条效果

只需在

<div class="progress-value">22.0%</div>

打入实时百分数值,js通过此数值将宽写入

<div class="progress-data"></div>

,添加一个色值可清晰展现数据占总柱形条的百分比

1
      insist0
      2017/8/22 16:00:06