使用 css3怎么實(shí)現(xiàn)一個(gè)圓形進(jìn)度條

使用 css3怎么實(shí)現(xiàn)一個(gè)圓形進(jìn)度條？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

html代碼

<div class="progressbar">
    <div class="left-container">
        <div class="left-circle"></div>
    </div>
    <div class="right-container">
        <div class="right-circle"></div>
    </div>
</div>

css代碼:

.progressbar{
    position: relative;
    margin: 100px auto;
    width: 100px;
    height: 100px;
    border: 20px solid #ccc;
    border-radius: 50%;
}
.left-container,.right-container{
    position: absolute;
    width: 70px;
    height: 140px;
    top:-20px;
    overflow: hidden;
    z-index: 1;
}
.left-container{
    left: -20px;
}
.right-container{
    right: -20px;
}
.left-circle,.right-circle{
    position: absolute;
    top:0;
    width: 100px;
    height: 100px;
    border:20px solid transparent;   
    border-radius: 50%;
    transform: rotate(-135deg);
    transition: all .5s linear;
    z-index: 2;
}
.left-circle{
    left: 0;
    border-top-color: 20px solid blue;
    border-left-color: 20px solid blue;
}
.right-circle{
    border-right-color: 20px solid blue;
    border-bottom-color: 20px solid blue;
    right: 0;
}

二：控制進(jìn)度條的js

為了使進(jìn)度條的邏輯更健壯，js部分的實(shí)現(xiàn)需要考慮四中情況：

1、基礎(chǔ)值個(gè)更改后的值在同在右邊進(jìn)度，

2、基礎(chǔ)值在右邊，更改后的值在左邊，

3、基礎(chǔ)值更改后的值同在左邊，

4、基礎(chǔ)值在左邊，更改后的值在右邊。

不管在那種情況下，核心需要考慮只有兩點(diǎn)：角度的變化和使用時(shí)間的多少。

第一種情況下，比較簡(jiǎn)單，可以很簡(jiǎn)單計(jì)算出角度的變化和使用時(shí)間的多少。首先，需要設(shè)定改變整個(gè)半圓的所需的時(shí)間值。設(shè)定之后，只要根據(jù)比例計(jì)算出改變的角度所需要的時(shí)間值即刻。代碼如下：

time = (curPercent - oldPercent)/50 * baseTime;
     //確定時(shí)間值為正
     curPercent - oldPercent > 0 ? '' : time = - time;
     deg = curPercent/50*180-135;

第二種情況，稍微麻煩一點(diǎn)。因?yàn)橹虚g有一個(gè)從右邊進(jìn)度，到左邊進(jìn)度的過渡。為了讓進(jìn)度順暢的改變，這里我們需要使用定時(shí)器，在改變完右邊的部分之后，再修改左邊的部分。代碼如下：

//設(shè)置右邊的進(jìn)度
  time = (50 - oldPercent)/50 * baseTime;
deg = (50 - oldPercent)/50*180-135;
$rightBar .css({
    transform: 'rotate('+ deg+ 'deg)',
    transition : 'all '+ time + 's linear'
})
//延時(shí)設(shè)置左邊進(jìn)度條的改變
setTimeout(function(){
    time = (curPercent - 50)/50;
    deg = (curPercent - 50)/50*180 -135;

    $leftBar.css({
        transform: 'rotate('+ deg+ 'deg)',
        transition : 'all '+ time + 's linear'
    })
}, Math.floor(time*1000));000));

第三種情況和第四種情況同前面情況類似，這里不再討論。

完整的控制進(jìn)度條的函數(shù)的代碼如下（使用jQuery實(shí)現(xiàn)）：

/**
    *設(shè)置進(jìn)度條的變化
    *@param {number} oldPercent    進(jìn)度條改變之前的半分比
    *@param {number} curPercent    進(jìn)度條當(dāng)前要設(shè)置的值 
    *@return {boolean} 設(shè)置成功返回 true，否則，返回fasle
    */
    function setProgessbar(oldPercent, curPercent){
        var $leftBar = $('#left-bar');
        var $rightBar = $('#right-bar');
        //將傳入的參數(shù)轉(zhuǎn)換，允許字符串表示的數(shù)字
        oldPercent =  + oldPercent;
        curPercent =  + curPercent;
        //檢測(cè)參數(shù)，如果不是number類型或不在0-100，則不執(zhí)行
        if(typeof oldPercent ==='number' && typeof curPercent ==='number'
            && oldPercent >= 0 && oldPercent <= 100 && curPercent <= 100 && curPercent >= 0){
    
            var baseTime = 1;    //默認(rèn)改變半圓進(jìn)度的時(shí)間，單位秒   
            var time = 0;    //進(jìn)度條改變的時(shí)間
            var deg = 0;     //進(jìn)度條改變的角度
            if(oldPercent > 50){//原來進(jìn)度大于50
                if(curPercent>50){
                    //設(shè)置左邊的進(jìn)度
                    time = (curPercent - oldPercent)/50 * baseTime;
                    //確定時(shí)間值為正
                    curPercent - oldPercent > 0 ? '' : time = - time;
                    deg = curPercent/50*180-135;
                    $leftBar .css({
                        transform: 'rotate('+ deg+ 'deg)',
                        transition : 'all '+ time + 's linear'
                    })
    
                }else{
                    //設(shè)置左邊的進(jìn)度
                    time = (oldPercent - 50)/50 * baseTime;
                    deg = (oldPercent - 50)/50*180-135;
                    $leftBar .css({
                        transform: 'rotate('+ deg+ 'deg)',
                        transition : 'all '+ time + 's linear'
                    })
                    //延時(shí)設(shè)置右邊進(jìn)度條的改變
                    setTimeout(function(){
                        time = (50 - curPercent)/50;
                        deg = (50 - curPercent)/50*180 -135;
                        $rightBar.css({
                            transform: 'rotate('+ deg+ 'deg)',
                            transition : 'all '+ time + 's linear'
                        })
                    }, Math.floor(time*1000));
                }
            }else{//原來進(jìn)度小于50時(shí)
    
                if(curPercent>50){
                    //設(shè)置右邊的進(jìn)度
                    time = (50 - oldPercent)/50 * baseTime;
                    deg = (50 - oldPercent)/50*180-135;
                    $rightBar .css({
                        transform: 'rotate('+ deg+ 'deg)',
                        transition : 'all '+ time + 's linear'
                    })
                    //延時(shí)設(shè)置左邊進(jìn)度條的改變
                    setTimeout(function(){
                        time = (curPercent - 50)/50;
                        deg = (curPercent - 50)/50*180 -135;
    
                        $leftBar.css({
                            transform: 'rotate('+ deg+ 'deg)',
                            transition : 'all '+ time + 's linear'
                        })
                    }, Math.floor(time*1000));
                }else{
                    //設(shè)置右邊的進(jìn)度
                    time = (curPercent - oldPercent)/50 * baseTime;
                    //確定時(shí)間值為正
                    curPercent - oldPercent > 0 ? '' : time = - time;
                    deg = curPercent/50*180-135;
                    $rightBar .css({
                        transform: 'rotate('+ deg+ 'deg)',
                        transition : 'all '+ time + 's linear'
                    })
    
                }
                return true;
            }
        }else{
            return false;
        }
    }

關(guān)于使用 css3怎么實(shí)現(xiàn)一個(gè)圓形進(jìn)度條問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。