css3 百分比进度条 |css滑动门竖着

.progress {
position: relative;
height: 20px;
background-color: #ddd;
border-radius: 10px;
}
.progress-bar {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: #4CAF50;
border-radius: 10px;
transition: width 0.5s ease-in-out;
}
.progress-bar:before {
content: '';
position: absolute;
left: -10px;
top: -10px;
width: 20px;
height: 20px;
background-color: #4CAF50;
border-radius: 50%;
}
.percentage {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 14px;
}

HTML代码：

<div class="progress">
<div class="progress-bar"><span class="percentage">50%</span></div>
</div>

实现效果：使用CSS3实现一个简单的百分比进度条，使用了伪元素，实现了圆形进度条的效果。