CSS扇形進度條可以讓我們在頁面中實現一個美觀而實用的進度展示效果。下面讓我們來學習一下如何使用CSS實現扇形進度條。

.progress {
width: 100px;
height: 100px;
border-radius: 50%;
background: #ddd;
position: relative;
}
.progress::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
clip: rect(0, 50px, 100px, 0);
background-color: #f76707;
transform-origin: center bottom;
transform: rotate(0deg);
}
.progress.completed::before {
animation: progress 2s ease-in-out;
}
@keyframes progress {
0% {
transform: rotate(0deg);
clip: rect(0, 100px, 100px, 0);
}
100% {
transform: rotate(180deg);
clip: rect(0, 50px, 100px, 0);
}
}

首先，我們創建一個進度條容器，設置其寬高和圓角讓它成為一個圓形。然后，我們使用偽元素:before來繪制進度條，將其放置在容器內的最上層。

:before元素我們設置一個clip剪輯區域，使其只顯示其容器寬度的一半。然后我們使用transform-origin將其基準點設置在其底部中心位置。讓它隨著進度條轉動渲染出圓弧形狀。

在progress類下，我們創建了一個animation動畫屬性，設置2秒鐘內完成，并在@keyframes中設置0-100%之間的動畫效果。

最后，我們只需給容器添加.completed屬性來觸發進度條的動畫效果。完成的進度條呈現半圓形狀態，進度條沒有完成時呈現半圓形到圓形的過渡狀態。在修改元素寬高的同時，偽元素內clip區域和transform動作都應做出相應調整。

簡單以上，一個漂亮的進度條就呈現在我們眼前了。是不是十分簡單易懂呢？