Comment implémenter une barre de progression en boucle circulaire en CSS

Comment implémenter une barre de progression de boucle circulaire avec CSS : 1. Créez un anneau parent le plus à l'extérieur ; 2. Dessinez deux demi-cercles à travers "clip-path" et positionnez-les de manière absolue sur l'anneau parent ; révélez lentement la couleur de l'anneau parent en faisant tourner le demi-cercle droit ; 4. Lorsqu'il est supérieur à 50, définissez le degré de rotation du demi-cercle droit sur 0, modifiez la couleur de sa bordure pour obtenir l'effet des 50 premiers, puis faites pivoter le côté gauche Un demi-cercle fera l'affaire.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3, ordinateur DELL G3

Comment implémenter une barre de progression circulaire circulaire en css ?

CSS pour implémenter la barre de progression en anneau

1. Barre de progression statique

Tout d'abord, regardons une barre de progression statique

• La première étape est bien sûr à implémentez-en un d'abord. L'anneau parent le plus externe.

• La deuxième étape consiste à dessiner deux demi-cercles via clip-path et à les positionner de manière absolue sur l'anneau parent. Lorsque clip-path画出两个半圆，并绝对定位覆盖在父级圆环。

• 小于50的时候，我们只需要通过旋转右半圆，慢慢透露出父级圆环的颜色，即可达到效果。

• 大于50的时候，我们先按照流程走前面50，再设置右半圆旋转度数为0，修改其border颜色来实现前50的效果，其次再旋转左侧半圆即可达到效果。

<template>
    <div>
        <div></div>
        <div></div>
        <div>
            <span>成功率</span>
            <span>85%</span>
        </div>
    </div></template><script>export default {
    name: &#39;CircleProgress&#39;,
    setup() {
        const renderRightRate = (rate: number) => {
            if (rate < 50) {
                return &#39;transform: rotate(&#39; + 3.6 * rate + &#39;deg);&#39;;
            } else {
                return &#39;transform: rotate(0);border-color: #54c4fd;&#39;;
            }
        };

        const renderLeftRate = (rate: number) => {
            if (rate >= 50) {
                return &#39;transform: rotate(&#39; + 3.6 * (rate - 50) + &#39;deg);&#39;;
            }
        };
        return {
            renderLeftRate,
            renderRightRate,
        };
    },};</script><style>.circle {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    left: 200px;
    top: 50px;
    box-shadow: inset 0 0 0 5px #54c4fd;

    .ab {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    &_left {
        border: 5px solid #546063;
        border-radius: 50%;
        clip: rect(0, 40px, 80px, 0);
    }

    &_right {
        border: 5px solid #546063;
        border-radius: 50%;
        clip: rect(0, 80px, 80px, 40px);
    }

    &_text {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;

        .name {
            margin-bottom: 4px;
        }
    }}</style>

效果如下图：

二、动态进度条

动态的css

est inférieur à 50, il suffit de faire pivoter le demi-cercle droit et de révéler lentement la couleur de l'anneau parent pour obtenir l'effet. Lorsque

est supérieur à 50, nous suivons d'abord le processus pour passer aux 50 premiers, puis réglons le degré de rotation du demi-cercle droit à 0, modifions la couleur de sa bordure pour obtenir l'effet des 50 premiers, puis faisons pivoter le gauche. demi-cercle pour obtenir l’effet.

<template>
    <div>
        <div></div>
        <div></div>
        <div>
            <span>成功率</span>
            <span>85%</span>
        </div>
    </div></template><script>import { onMounted, ref, Ref } from &#39;vue&#39;;export default {
    name: &#39;CircleProgress&#39;,
    setup() {
        const circleLeft: Ref<HTMLElement | null | any> = ref(null);
        const circleRight: Ref<HTMLElement | null | any> = ref(null);
        let timer = 0;
        let percent = 0;

        const step = () => {
            percent += 1;

            if (percent < 50) {
                circleRight.value.style.transform = &#39;rotate(&#39; + 3.6 * percent + &#39;deg)&#39;;
            } else {
                circleRight.value.style.transform = &#39;rotate(0)&#39;;
                circleRight.value.style.borderColor = &#39;#54c4fd&#39;;
                circleLeft.value.style.transform = &#39;rotate(&#39; + 3.6 * (percent - 50) + &#39;deg)&#39;;
            }
            if (percent < 85) {
                window.clearTimeout(timer);
                timer = window.setTimeout(step, 20);
            }
        };

        onMounted(() => {
            step();
        });

        return {
            circleLeft,
            circleRight,
        };
    },};</script>

L'effet est le suivant :

🎜🎜🎜2. Barre de progression dynamique🎜🎜Le css dynamique est en fait le même que la barre statique. 🎜 Cet exemple est écrit à un rythme fixe, et vous pouvez également le modifier selon vos propres besoins. 🎜rrreee🎜L'effet est le suivant :🎜🎜🎜🎜Apprentissage recommandé : "🎜Tutoriel vidéo CSS🎜"🎜🎜

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!