實現環形進度條（CSS3+jQuery/Vue）

BWrong 發布于2019-08-29 12:22 / 3264人閱讀

摘要：整體思路是通過裁切產生兩個半圓展示出靜態的進度條，而后通過旋轉角度的變化產生動態效果。而藍色部分元素的顏色，是我們還未到達的進度。演示勤快的我去里寫了一下這個是的實現這個是的實現環形進度條。參考文章利用和實現環形進度條

整體思路是：通過裁切（clip）產生兩個半圓展示出靜態的進度條，而后通過旋轉（rotate）角度的變化產生動態效果。

先來回顧兩個基礎知識點

（1）css的一個不常見的屬性：

clip: rect(top, right, bottom, left);

這個屬性規定了一個裁切的矩形，其中top和bottom所指定的偏移量是從元素盒子頂部邊緣算起，right和left所指定的偏移量是從元素盒子左側邊緣算起（這里需要重點注意的是bottom和right的計算方式）。看下面這張超級清晰的圖（直接把w3cplus的圖搬過來了，帶著水印不違規的吧？）：

需要注意的是：clip屬性只能在元素設置了“position:absolute”或者“position:fixed”屬性時起作用。clip無法在設置“position:relative”和“position:static”上工作。

關于clip，想要深入了解請看這篇文章: http://www.w3cplus.com/css3/c...

（2）CSS的另一個屬性：

transform: rotate(deg);

順時針旋轉一定的角度。

熱身運動：我們來畫一個右半圓

//html

    
    0%

//css
.pie-right {
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: red;//注意這是表示當前進度的顏色
}
.right {
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: blue;//注意這個才不是當前進度的顏色
}
.pie-right, .right {
    clip: rect(0, auto, auto, 100px);
}
.mask {//我是遮罩
    position: absolute;
    top: 25px;
    left: 25px;
    height: 150px;
    width: 150px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
}

效果如下：

此時，元素pie-right完全被元素right遮住了。

然后，我們來旋轉一下：

.right {
    transform: rotate(30deg);
}

旋轉后效果如下：

現在我們可以看到，旋轉了30度時，露出的紅色部分就是我們要的進度，這是pie-right元素的顏色。而藍色部分right元素的顏色，是我們還未到達的進度。

正式開始

實現環形進度條意味著我們需要左右兩個半圓，因此html結構要改變一下：

//html


    
        
    
    
        
    
    0%


//css
.circle {//這個元素可以提供進度條的顏色
    position: absolute;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: red;//注意這是表示當前進度的顏色
}
.pie-right, .pie-left { //這倆元素主要是為了分別生成兩個半圓的，所以起作用的地方在于clip裁掉另一半
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 200px;
    border-radius: 50%;
}
.right, .left {
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: blue;//注意這個才不是當前進度的顏色
}
.pie-right, .right { //裁掉左邊一半
    clip: rect(0, auto, auto, 100px);
}
.pie-left, .left { //裁掉右邊一半
    clip: rect(0, 100px, auto, 0);
}
.mask {//我是遮罩 mask不用改 好欣慰
    position: absolute;
    top: 25px;
    left: 25px;
    height: 150px;
    width: 150px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
}

效果是介樣滴：

此時進度是0，讓我們來rotate一下，先旋轉30度吧

.right{
    transform: rotate(30deg);
}

于是就變成了這樣：【請始終記住，紅色部分是當前進度。】

然后再旋轉210度看看效果【210度就是右邊完全旋轉，左邊再旋轉30度】：

.right{
    transform: rotate(180deg);
}
.left{
    transform: rotate(30deg);
}

長這樣：

最后的最后，當進度數值動態增加時，通過js去改變旋轉的角度就可以實現進度條動態變化了。
進度數值每增加1，角度增加3.6度，還要注意的是，當進度小于50%時，左側進度條沒有變化，當大于50%，左側進度條才開始改變。
我們可以寫一個函數:

function changeProcess(value) {
    var num = value * 3.6;
    if(num < 180) {
        $(".right").css("transform", "rotate(" + num + "deg)");
    } else {
        $(".right").css("transform", "rotate(180deg)");
        $(".left").css("transform", "rotate(" + (num-180) + "deg)");
    }
}

當進度值變化時，調用這個函數即可。

jsfiddle演示

勤快的我去jsfiddle里寫了一下（這個是jQuery的實現）：jsfiddle

這個是Vue的實現： Vue環形進度條。用到Vue的綁定內聯樣式。

參考文章：
利用jQuery和CSS實現環形進度條
https://www.w3cplus.com/css3/...

GPU云服務器云服務器環形進度條進度條實現代碼進度條實現原理 php實現進度條

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111854.html

實現環形進度條（CSS3+jQuery/Vue）

摘要：整體思路是通過裁切產生兩個半圓展示出靜態的進度條，而后通過旋轉角度的變化產生動態效果。而藍色部分元素的顏色，是我們還未到達的進度。演示勤快的我去里寫了一下這個是的實現這個是的實現環形進度條。參考文章利用和實現環形進度條整體思路是：通過裁切（clip）產生兩個半圓展示出靜態的進度條，而后通過旋轉（rotate）角度的變化產生動態效果。先來回顧兩個基礎知識點（1）css的一個不常見的...

lidashuang 2019-08-21 15:32 評論0 收藏0
實現環形進度條（CSS3+jQuery/Vue）

摘要：整體思路是通過裁切產生兩個半圓展示出靜態的進度條，而后通過旋轉角度的變化產生動態效果。而藍色部分元素的顏色，是我們還未到達的進度。演示勤快的我去里寫了一下這個是的實現這個是的實現環形進度條。參考文章利用和實現環形進度條整體思路是：通過裁切（clip）產生兩個半圓展示出靜態的進度條，而后通過旋轉（rotate）角度的變化產生動態效果。先來回顧兩個基礎知識點（1）css的一個不常見的...

charles_paul 2019-08-01 16:36 評論0 收藏0
svg和css3創建環形漸變進度條

摘要：在負責的項目中，有一個環形漸變讀取進度的效果的需求，于是在網上查閱相關資料整理一下。在負責的項目中，有一個環形漸變讀取進度的效果的需求，于是在網上查閱相關資料整理一下。代碼如下： Title ...

mo0n1andin 2019-08-02 12:04 評論0 收藏0
svg和css3創建環形漸變進度條

摘要：在負責的項目中，有一個環形漸變讀取進度的效果的需求，于是在網上查閱相關資料整理一下。在負責的項目中，有一個環形漸變讀取進度的效果的需求，于是在網上查閱相關資料整理一下。代碼如下： Title ...

rubyshen 2019-08-29 17:21 評論0 收藏0
svg和css3創建環形漸變進度條

摘要：在負責的項目中，有一個環形漸變讀取進度的效果的需求，于是在網上查閱相關資料整理一下。在負責的項目中，有一個環形漸變讀取進度的效果的需求，于是在網上查閱相關資料整理一下。代碼如下： Title ...

lily_wang 2019-08-26 13:25 評論0 收藏0