手把手教你:如何實現圓形進度條
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
有很多作用,比如溢出隱藏,清除浮動以及解決外邊距塌陷問題。
結束語
這就是一個很簡單的圓形進度條,其實還能有很多擴展的地方,比如説通過按鈕點擊事件來控制進度條的長度,也可以對進度條設置數值屬性,在進度增加或減少的過程中數值也會發生變化,以及設置各種顏色來豐富進度條樣式等等。總而言之,在這個進度條上還能有很多能夠擴展的地方。感興趣的小夥伴可以去嘗試一下。