这是第一版进度条 ,用css写的.但是后续因为数据不同,要显示不同的颜色和数据,所以又改了一版,直接用的el-progress.自定义的样式.对于新手小白来说比较友好.先上这一版代码.
<div class="state">
<span>开机时间</span>
<!-- 进度条 -->
<div class="progress">
<div class="masker"></div>
</div>
<span class="progress-text">100.0% 满分哦!</span>
</div>
.progress {
margin: 0 0 0 20px;
width: 200px;
height: 12px;
border-radius: 2px;
background: linear-gradient(
45deg,
#82f5fe 36%,
#94ffff 28%,
#94ffff 67%,
#82f5fe 25%
);
background-size: 24px 12px;
-webkit-animation: load 3s;
animation: load 3s;
position: relative;
}
@keyframes load {
0% {
width: 0;
}
}
.progress-text {
color: #82f5fe;
font-weight: 600;
padding: 0 10px;
}
.progress-text2 {
color: #82f5fe;
font-weight: 600;
position: absolute;
right: 80px;
}