圓環進度圖是一種常見的動態展示方式，用于表示一個圓形的進度條，其設計美觀，效果震撼。在本文中，我們將探討如何使用 CSS 來制作圓環進度圖。
下面是一個使用 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 來創建復雜的動態效果，使其更加引人注目。