下面是一个使用 CSS 制作圆环进度图的示例代码：
“`html
<div class=”circle-progress”>
<div class=”circle progress-bar”></div>
</div>
“`css
.circle-progress {
position: relative;
width: 200px;
height: 200px;
.circle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
.circle-progress .circle- progress-bar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
background-color: #007bff;
animation: progress-bar 1s linear infinite;
.circle-progress .circle- progress-bar:nth-child(1) {
animation-delay: 0.2s;
.circle-progress .circle- progress-bar:nth-child(2) {
animation-delay: 0.4s;
.circle-progress .circle- progress-bar:nth-child(3) {
animation-delay: 0.6s;
.circle-progress .circle- progress-bar:nth-child(4) {
animation-delay: 0.8s;
@keyframes progress-bar {
0% {
width: 100%;
height: 0;
100% {
width: 0;
height: 100%;
接下来，大家使用 CSS 的 position: relative 属性来设置进度条的相对位置，使用 position: absolute 属性来设置进度条的绝对位置。然后，大家使用 top、left 和 width、height 属性来设置进度条的宽度和高度。最后，大家使用 transform 属性来设置进度条的旋转角度和位置。
通过使用 CSS，大家可以轻松地制作出漂亮的圆环进度图。不仅如此，大家还可以使用 CSS 来创建复杂的动态效果，使其更加引人注目。