CSS3 圓圈進度條是一種常用的前端技術，通常用于展示一個任務或事件的進度。使用CSS3 圓圈進度條可以很方便地實現這種效果，下面我們就來學習如何使用CSS3 圓圈進度條。

.circle {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
border-radius: 50%;
background: #eee;
}
.circle::before,
.circle::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
overflow: hidden;
border-radius: 50%;
}
.circle::before {
background-color: #3498db;
}
.circle::after {
transform: rotate(180deg);
background-color: #f1c40f;
}

上面的代碼展示了一個CSS3 圓圈進度條的實現方式。首先，我們定義了一個名為.circle的CSS class，將其應用到一個div元素上。然后通過設置元素的寬高和border-radius屬性，定義了一個圓形的形狀，并設置了背景色為淺灰色。

接下來，我們使用偽元素::before和::after，分別創建兩個半圓形的進度條。我們設置了這兩個元素的position屬性為absolute，然后將它們分別設置為圓形的左半邊和右半邊，使用overflow:hidden來隱藏超出容器的部分。

對于這兩個半圓形的進度條，我們分別設置了不同的背景色，然后通過使用transform:rotate(180deg)將右半邊的進度條旋轉了180度，使其變成了從右到左的進度條。最后，我們在HTML中引用這個CSS class，就可以看到一個美觀的圓圈進度條了。