html:
<progress value="0" max="100">
您的浏览器不支持progress元素
</progress> <span>56%</span>
value:是达到百分比的值,max是最大可到达
css:
progress {
border-radius: 6px;
border-left: 6px #FBB748 solid; //左边,已达到的百分比的颜色
border-right: 6px #FDDDA7 solid;//右边,未达到的百分比的颜色
background-color: #eee; //总体的背景色
height: 11px; //进度条的高度
}
progress::-webkit-progress-bar {
background-color: #FDDDA7; //未达到的百分比的颜色
}
progress::-webkit-progress-value {
background-color: #FBB748; //value的百分比的颜色
}
另一个:
.prog progress { -webkit-appearance: none;width: 7.25rem; height: 0.4rem; }
.prog progress::-webkit-progress-inner-element { }
.prog progress::-webkit-progress-bar { width: 7.25rem; height: 0.4rem; border: 0px ; border-radius:3px;background:rgba(255,90,90,0.48);}
.prog progress::-webkit-progress-value { background: #FF2338; border-radius:3px;}
.prog progress::-moz-progress-bar { background:rgba(255,90,90,0.48); border-radius:3px;}
.prog progress::-ms-fill {background: #FF2338; }