写一个新拟态风格的css进度条

/* 新拟态风格进度条样式 */

.progress-bar {
position: relative;
height: 10px;
background-color: #f2f2f2;
border-radius: 5px;
}

.progress-bar::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #ffa500;
border-radius: 5px;
animation: progress 2s ease-in-out;
}

@keyframes progress {
0% {
width: 0;
}
100% {
width: 100%;
}
}

.progress-bar::after {
content: "";
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

/* 修改进度条颜色 */

.progress-bar.blue::before {
background-color: #4a90e2;
}

.progress-bar.green::before {
background-color: #27ae60;
}

.progress-bar.red::before {
background-color: #c0392b;
}