CSS3怎么制作圓環形進度條

這篇文章給大家介紹CSS3怎么制作圓環形進度條，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

首先，當有人說你能不能做一個圓形進度條效果出來時，如果是靜態完整圓形進度條，那么就很簡單了：

CSS Code復制內容到剪貼板

1. .circleprogress{   
       width: 160px;   
       height: 160px;   
       border:20px solid red;   
       border-radius: 50%;   
   }

然后就會說，這很簡單嘛。但是如果不是完整圓形的呢？想了想：

CSS Code復制內容到剪貼板

1. .circleprogress{   
     width: 160px;   
     height: 160px;   
     border:20px solid red;   
     border-left:20px solid transparent;   
     border-bottom:20px solid transparent;   
     border-radius: 50%;   
   }

然后還是會說，這個也不難啦。可是，如果不是剛好都是45度的倍數呢？

OK，我們先設置一個200x200的方塊，然后我們在這里面完成我們的效果：

CSS Code復制內容到剪貼板

1. .circleProgress_wrapper{   
     width: 200px;   
     height: 200px;   
     margin: 50px auto;   
     position: relative;   
     border:1px solid #ddd;   
   }

接下來我將在這個容器里再放兩個矩形，每個矩形都占一半：

XML/HTML Code復制內容到剪貼板

<div class="circleProgress_wrapper">  
        <div class="wrapper right">  
            <div class="circleProgress rightcircle"></div>  
        </div>  
        <div class="wrapper left">  
            <div class="circleProgress leftcircle"></div>  
        </div>  
 </div>

CSS Code復制內容到剪貼板

1. .wrapper{   
     width: 100px;   
     height: 200px;   
     position: absolute;   
     top:0;   
     overflow: hidden;   
   }   
   .rightright{   
     rightright:0;   
   }   
   .left{   
     left:0;   
   }

這里重點說一下.wrapper 的overflow:hidden; 起著關鍵性作用。這兩個矩形都設置了溢出隱藏，那么當我們去旋轉矩形里面的圓形的時候，溢出部分就被隱藏掉了，這樣我們就可以達到我們想要的效果。

從html結構也已看到，在左右矩形里面還會各自有一個圓形，先講一下右半圓：

CSS Code復制內容到剪貼板

1. .circleProgress{   
     width: 160px;   
     height: 160px;   
     border:20px solid transparent;   
     border-radius: 50%;   
     position: absolute;   
     top:0;   
   }   
   .rightcircle{   
     border-top:20px solid green;   
     border-right:20px solid green;   
     rightright:0;   
   }

可以看到，效果已經出來了，其實本來是一個半圓弧，但由于我們設置了上邊框和右邊框，所以上邊框有一半溢出而被隱藏了，所以我們可以通過旋轉得以還原：

CSS Code復制內容到剪貼板

1. 
   

2. .circleProgress{   
     width: 160px;   
     height: 160px;   
     border:20px solid transparent;   
     border-radius: 50%;   
     position: absolute;   
     top:0;   
     -webkit-transform: rotate(45deg);   
   }

所以只要旋轉自己想要的角度就可以實現任意比例的進度條。接下來把左半圓弧也實現，變成一個全圓：

CSS Code復制內容到剪貼板

1. .

2. leftcircle{   
       border-bottom:20px solid green;   
       border-left:20px solid green;   
       left:0;   
   }

緊接著，就是讓它動起來，原理是這樣的， 先讓右半圓弧旋轉180度，再讓左半圓弧旋轉180度 ，這樣，兩個半圓弧由于先后都全部溢出而消失了，所以看起來就是進度條再滾動的效果：

CSS Code復制內容到剪貼板

1.   .rightcircle{   
     border-top:20px solid green;   
     border-right:20px solid green;   
     rightright:0;   
     -webkit-animation: circleProgressLoad_right 5s linear infinite;   
   }   
   .leftcircle{   
     border-bottom:20px solid green;   
     border-left:20px solid green;   
     left:0;   
     -webkit-animation: circleProgressLoad_left 5s linear infinite;   
   }   
   @-webkit-keyframes circleProgressLoad_right{   
     0%{   
       -webkit-transform: rotate(45deg);   
     }   
     50%,100%{   
       -webkit-transform: rotate(225deg);   
     }   
   }   
   @-webkit-keyframes circleProgressLoad_left{   
     0%,50%{   
       -webkit-transform: rotate(45deg);   
     }   
     100%{   
       -webkit-transform: rotate(225deg);   
     }   
   }

當然，我們只需要調整一下角度就可以實現反向的效果：

CSS Code復制內容到剪貼板

    .circleProgress{   
  width: 160px;   
  height: 160px;   
  border:20px solid transparent;   
  border-radius: 50%;   
  position: absolute;   
  top:0;   
  -webkit-transform: rotate(-135deg);   
}   
@-webkit-keyframes circleProgressLoad_right{   
  0%{   
    -webkit-transform: rotate(-135deg);   
  }   
  50%,100%{   
    -webkit-transform: rotate(45deg);   
  }   
}   
@-webkit-keyframes circleProgressLoad_left{   
  0%,50%{   
    -webkit-transform: rotate(-135deg);   
  }   
  100%{   
    -webkit-transform: rotate(45deg);   
  }   
}

好的，接下來就是奔向最終效果了，正如我們一開始看到的那樣，有點像我們使用360衛士清理垃圾時的類似效果，當然不是很像啦：

CSS Code復制內容到剪貼板

1.     .circleProgress_wrapper{   
     width: 200px;   
     height: 200px;   
     margin: 50px auto;   
     position: relative;   
     border:1px solid #ddd;   
   }   
   .wrapper{   
     width: 100px;   
     height: 200px;   
     position: absolute;   
     top:0;   
     overflow: hidden;   
   }   
   .rightright{   
     rightright:0;   
   }   
   .left{   
     left:0;   
   }   
   .circleProgress{   
     width: 160px;   
     height: 160px;   
     border:20px solid rgb(232, 232, 12);   
     border-radius: 50%;   
     position: absolute;   
     top:0;   
     -webkit-transform: rotate(45deg);   
   }   
   .rightcircle{   
     border-top:20px solid green;   
     border-right:20px solid green;   
     rightright:0;   
     -webkit-animation: circleProgressLoad_right 5s linear infinite;   
   }   
   .leftcircle{   
     border-bottom:20px solid green;   
     border-left:20px solid green;   
     left:0;   
     -webkit-animation: circleProgressLoad_left 5s linear infinite;   
   }   
   @-webkit-keyframes circleProgressLoad_right{   
     0%{   
       border-top:20px solid #ED1A1A;   
       border-right:20px solid #ED1A1A;   
       -webkit-transform: rotate(45deg);   
     }   
     50%{   
       border-top:20px solid rgb(232, 232, 12);   
       border-right:20px solid rgb(232, 232, 12);   
       border-left:20px solid rgb(81, 197, 81);   
       border-bottom:20px solid rgb(81, 197, 81);   
       -webkit-transform: rotate(225deg);   
     }   
     100%{   
       border-left:20px solid green;   
       border-bottom:20px solid green;   
       -webkit-transform: rotate(225deg);   
     }   
   }   
   @-webkit-keyframes circleProgressLoad_left{   
     0%{   
       border-bottom:20px solid #ED1A1A;   
       border-left:20px solid #ED1A1A;   
       -webkit-transform: rotate(45deg);   
     }   
     50%{   
       border-bottom:20px solid rgb(232, 232, 12);   
       border-left:20px solid rgb(232, 232, 12);   
       border-top:20px solid rgb(81, 197, 81);   
       border-right:20px solid rgb(81, 197, 81);   
       -webkit-transform: rotate(45deg);   
     }   
     100%{   
       border-top:20px solid green;   
       border-right:20px solid green;   
       border-bottom:20px solid green;   
       border-left:20px solid green;   
       -webkit-transform: rotate(225deg);   
     }   
   }

可以看到，其實就是多了一些改變不同邊框顏色的動畫而已，這個就給大家自己去實踐吧！ 主要還是利用兩個矩形來完成這么一個圓形進度條效果，特別注意overflow這條規則，起著關鍵作用。

關于CSS3怎么制作圓環形進度條就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。