css类似进度条 |css渲染顺序

.progress {
position: relative;
height: 10px;
width: 100%;
background: #f5f5f5;
border-radius: 5px;
}
.progress:before {
content: "";
position: absolute;
height: 100%;
width: 0;
background-color: #1abc9c;
border-radius: 5px;
transition: width 0.3s ease;
}
.progress.success:before {
background-color: #2ecc71;
}
.progress.warning:before {
background-color: #f1c40f;
}
.progress.danger:before {
background-color: #e74c3c;
}
.progress.active:before {
animation: animate-progress 1s infinite;
}
@keyframes animate-progress {
0%, 100% {
width: 0;
}
50% {
width: 50%;
}
}

上述代码实现了一种基本的进度条样式，包括背景颜色、边框圆角、进度条颜色、动画效果等。大家可以根据需求自定义不同种类的进度条样式，例如成功、警告、危险状态下的进度条样式。此外，大家还可以通过JavaScript等技术动态地改变进度条的进度。