Comment implémenter une barre de progression circulaire en utilisant CSS3

Cet article présente principalement des exemples d'utilisation de CSS3 pour implémenter des barres de progression circulaires. Le code détaillé est compilé ici, ce qui est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer

Lors du développement de l'applet WeChat, ils rencontrent. la nécessité d’une barre de progression circulaire. Utiliser Canvas pour dessiner est gênant :

1 Afin de réaliser une adaptation sur différents écrans, la taille de la barre de progression doit être calculée dynamiquement

2. a le plus haut niveau, pas facilement extensible.

Mais utiliser CSS3 et js pour implémenter la barre de progression peut facilement éviter ce problème.

Remarque : Cet article est implémenté en utilisant jquery, mais le principe est le même. Il suffit de définir et de modifier les variables correspondantes dans le mini programme

1. Style de barre de progression. style

Dans le développement quotidien, la bordure d'un élément est souvent utilisée pour afficher un motif circulaire. Cette technique est également utilisée lors de l'utilisation de CSS3 pour implémenter une barre de progression circulaire. Afin de réaliser la bordure circulaire au-dessus et de couvrir dynamiquement la bordure circulaire en dessous, un total d'un cercle, 2 rectangles et 2 demi-cercles sont nécessaires : un cercle est utilisé pour afficher l'arrière-plan sous-jacent et deux demi-cercles sont utilisés pour couvrir l'arrière-plan sous-jacent. . L'arrière-plan montre la progression et les deux autres rectangles sont utilisés pour couvrir la progression qui n'a pas besoin d'être affichée. Comme indiqué ci-dessous :

Le cercle inférieur est l'arrière-plan de la barre de progression. Il y a deux rectangles à gauche et à droite au-dessus du bas, qui sont utilisés pour couvrir la barre de progression. ne doit pas être affiché. Il y a un demi-cercle à l’intérieur de chacun des deux rectangles pour montrer la progression. Dans des circonstances normales, un demi-cercle dessiné à l'aide d'un carré a un angle inclus de 45 degrés en diamètre et horizontalement. Afin que les deux demi-cercles soient juste suffisants pour couvrir tout le cercle, vous devez utiliser rotate dans CSS3 pour faire pivoter le carré d'origine afin d'obtenir l'effet de couvrir tout l'arrière-plan. Comme le montre l'image ci-dessous (pour plus de clarté, il est représenté ici par un carré) :

Comme le montre l'image, faites pivoter le demi-cercle à l'intérieur du rectangle de 45 degrés par rapport au à droite (dans le sens des aiguilles d'une montre) pour obtenir la progression. Une image qui couvre tout l'arrière-plan. Faites pivoter le demi-cercle de 135 degrés vers la gauche (dans le sens inverse des aiguilles d'une montre) pour obtenir une image avec uniquement l'arrière-plan de la barre de progression. Pourquoi devrions-nous tourner vers la gauche au lieu de complètement vers la droite ? Bien entendu, l’effet que nous souhaitons obtenir est le suivant : la progression commence par le haut et se poursuit dans le temps ? À ce stade, l'idée est très claire. Il vous suffit de contrôler l'affichage de la progression à gauche et à droite par le pourcentage.

Le code html et css pour implémenter cette partie est le suivant :

code html

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

code 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;
}

Deux : js pour contrôler la barre de progression

Dans l'ordre pour rendre la logique de la barre de progression plus robuste, l'implémentation de la partie js doit considérer quatre situations :

1 La valeur de base et la valeur modifiée sont sur le côté droit de la progression,

2. La valeur de base est à droite, et la valeur modifiée est à droite,

3 La valeur modifiée par rapport à la valeur de base est à gauche,

4. La valeur de base est à gauche et la valeur modifiée est à droite.

Quel que soit le cas, le noyau ne doit prendre en compte que deux points : le changement d'angle et la durée d'utilisation.

Dans le premier cas, c'est relativement simple, et vous pouvez facilement calculer le changement d'angle et la durée d'utilisation. Tout d'abord, vous devez définir le temps nécessaire pour changer tout le demi-cercle. Après le réglage, calculez simplement le temps nécessaire pour changer l'angle en fonction du rapport. Le code est le suivant :

time = (curPercent - oldPercent)/50 * baseTime;
     //确定时间值为正
     curPercent - oldPercent > 0 ? '' : time = - time;
     deg = curPercent/50*180-135;

Le deuxième cas est un peu plus gênant. Parce qu’il y a une transition du progrès à droite au progrès à gauche. Afin de modifier la progression en douceur, nous devons utiliser une minuterie ici. Après avoir changé la partie droite, modifiez la partie gauche. Le code est le suivant :

//设置右边的进度
  time = (50 - oldPercent)/50 * baseTime;
deg = (50 - oldPercent)/50*180-135;
$rightBar .css({
    transform: 'rotate('+ deg+ 'deg)',
    transition : 'all '+ time + 's linear'
})
//延时设置左边进度条的改变
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));

Les troisième et quatrième cas sont similaires aux cas précédents et ne seront pas abordés ici.

Le code de fonction complet pour contrôler la barre de progression est le suivant (implémenté à l'aide de jQuery) :

/**
    *设置进度条的变化
    *@param {number} oldPercent    进度条改变之前的半分比
    *@param {number} curPercent    进度条当前要设置的值 
    *@return {boolean} 设置成功返回 true，否则，返回fasle
    */
    function setProgessbar(oldPercent, curPercent){
        var $leftBar = $('#left-bar');
        var $rightBar = $('#right-bar');
        //将传入的参数转换，允许字符串表示的数字
        oldPercent =  + oldPercent;
        curPercent =  + curPercent;
        //检测参数，如果不是number类型或不在0-100，则不执行
        if(typeof oldPercent ==='number' && typeof curPercent ==='number'
            && oldPercent >= 0 && oldPercent <= 100 && curPercent <= 100 && curPercent >= 0){
    
            var baseTime = 1;    //默认改变半圆进度的时间，单位秒   
            var time = 0;    //进度条改变的时间
            var deg = 0;     //进度条改变的角度
            if(oldPercent > 50){//原来进度大于50
                if(curPercent>50){
                    //设置左边的进度
                    time = (curPercent - oldPercent)/50 * baseTime;
                    //确定时间值为正
                    curPercent - oldPercent > 0 ? &#39;&#39; : time = - time;
                    deg = curPercent/50*180-135;
                    $leftBar .css({
                        transform: &#39;rotate(&#39;+ deg+ &#39;deg)&#39;,
                        transition : &#39;all &#39;+ time + &#39;s linear&#39;
                    })
    
                }else{
                    //设置左边的进度
                    time = (oldPercent - 50)/50 * baseTime;
                    deg = (oldPercent - 50)/50*180-135;
                    $leftBar .css({
                        transform: &#39;rotate(&#39;+ deg+ &#39;deg)&#39;,
                        transition : &#39;all &#39;+ time + &#39;s linear&#39;
                    })
                    //延时设置右边进度条的改变
                    setTimeout(function(){
                        time = (50 - curPercent)/50;
                        deg = (50 - curPercent)/50*180 -135;
                        $rightBar.css({
                            transform: &#39;rotate(&#39;+ deg+ &#39;deg)&#39;,
                            transition : &#39;all &#39;+ time + &#39;s linear&#39;
                        })
                    }, Math.floor(time*1000));
                }
            }else{//原来进度小于50时
    
                if(curPercent>50){
                    //设置右边的进度
                    time = (50 - oldPercent)/50 * baseTime;
                    deg = (50 - oldPercent)/50*180-135;
                    $rightBar .css({
                        transform: &#39;rotate(&#39;+ deg+ &#39;deg)&#39;,
                        transition : &#39;all &#39;+ time + &#39;s linear&#39;
                    })
                    //延时设置左边进度条的改变
                    setTimeout(function(){
                        time = (curPercent - 50)/50;
                        deg = (curPercent - 50)/50*180 -135;
    
                        $leftBar.css({
                            transform: &#39;rotate(&#39;+ deg+ &#39;deg)&#39;,
                            transition : &#39;all &#39;+ time + &#39;s linear&#39;
                        })
                    }, Math.floor(time*1000));
                }else{
                    //设置右边的进度
                    time = (curPercent - oldPercent)/50 * baseTime;
                    //确定时间值为正
                    curPercent - oldPercent > 0 ? &#39;&#39; : time = - time;
                    deg = curPercent/50*180-135;
                    $rightBar .css({
                        transform: &#39;rotate(&#39;+ deg+ &#39;deg)&#39;,
                        transition : &#39;all &#39;+ time + &#39;s linear&#39;
                    })
    
                }
                return true;
            }
        }else{
            return false;
        }
    }

Ce qui précède est l'intégralité contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser RGBa pour ajuster la transparence en CSS3

Lorsque la souris est survolée à l'aide de CSS3 Border rotation

Utilisez CSS3 pour écrire des filtres en niveaux de gris afin de créer des effets photo en noir et blanc

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!