手把手教你：如何實現圓形進度條
ead>theme: smartblue
我正在參加「碼上掘金挑戰賽」詳情請看：碼上掘金挑戰賽來了！
關於進度條
相信大家對進度條都並不陌生，比如登錄時在等待的時候，看視頻的時候，都能看到進度條的身影。在 Html 中，也有專門為進度條設計的標籤 < /progress>，直接使用它也是可以做出基礎版進度條的。 ```
``` 基礎版無樣式進度條 < /progress> 如下所示：
如上所示，這樣做出來的進度條是條形的。正如我們所看到的一樣，大部分的進度條都是條形的。因此，我們應該對進度條的樣式做出什麼修改，能使它變成圓形進度條呢。
代碼塊
實現思路
整體實現起來其實很簡單，主要是通過設置相應的動畫來實現效果。
這個圓形進度條，表面上看是由一個 div 盒子變成圓形來組成，其實內部實際上是由兩個 div 盒子組成，左右各一半。 ```
``
總共三個 div 盒子，父級大盒子裏套了兩個小盒子，並左右浮動。對左盒子上邊框、左邊框和右盒子上邊框、右邊框顏色設置透明。舉個例子吧，border-top/left-color:pink;和border-bottom/right-color:green;` 屬性顏色分佈如下圖所示:
.progress .circle {
border-radius: 50%;
width: 88px;
height: 88px;
}
.progress .left .circle {
float: left;
border: 6px solid skyblue;
border-top-color: transparent;
border-left-color: transparent;
animation: left_cirlce 5s linear infinite;
}
.progress .right .circle {
float: right;
border: 6px solid skyblue;
border-top-color: transparent;
border-right-color: transparent;
animation: right_cirlce 5s linear infinite;
}
關於動畫部分，設置兩個名為 left_circle 和 right_circle 的動畫，來實現圓形進度條的自動滾動，並且設置linear infinite讓播放速度相同且播放無限次。0%-100% 等於 from-to。0% 是動畫的開始時間，50% 是動畫完成一半的時間，100% 動畫結束時間。
@keyframes left_cirlce {
0%,50% {
transform: rotate(-45deg);
}
100%{
transform: rotate(135deg);
}
}
@keyframes right_cirlce {
0% {
transform: rotate(45deg);
}
50%,100%{
transform: rotate(225deg);
}
}
最後，這裏有個很關鍵的屬性，就是overflow:hidden可以溢出隱藏。overflow:hidden有很多作用，比如溢出隱藏，清除浮動以及解決外邊距塌陷問題。
結束語
這就是一個很簡單的圓形進度條，其實還能有很多擴展的地方，比如説通過按鈕點擊事件來控制進度條的長度，也可以對進度條設置數值屬性，在進度增加或減少的過程中數值也會發生變化，以及設置各種顏色來豐富進度條樣式等等。總而言之，在這個進度條上還能有很多能夠擴展的地方。感興趣的小夥伴可以去嘗試一下。