Bagaimana untuk melaksanakan bar kemajuan gelung bulat dalam css

Cara melaksanakan bar kemajuan gelung bulat dengan css: 1. Buat cincin induk paling luar; adalah kurang daripada 50, perlahan-lahan mendedahkan warna cincin induk dengan memutar separuh bulatan kanan 4. Apabila lebih besar daripada 50, tetapkan tahap putaran separuh bulatan kanan kepada 0 dan ubah suai warna sempadannya untuk mencapai kesan yang pertama; 50. Kedua Kemudian putar separuh bulatan kiri untuk mencapai kesan.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3, komputer DELL G3

Cara melaksanakan gelung bulat bar kemajuan dalam css?

Pelaksanaan CSS bar kemajuan cincin

1. Bar kemajuan statik

Pertama, mari lihat bar kemajuan statik

• Langkah pertama sudah tentu untuk melaksanakan cincin induk paling luar.

• Langkah kedua ialah melukis dua separuh bulatan melalui clip-path dan letakkannya sepenuhnya di atas cincin induk. Apabila

• kurang daripada 50, kita hanya perlu memutar separuh bulatan kanan dan perlahan-lahan mendedahkan warna cincin induk untuk mencapai kesannya.

• Apabila lebih daripada 50, kita mula-mula mengikuti proses untuk pergi ke 50 yang pertama, kemudian tetapkan darjah putaran separuh bulatan kanan kepada 0, ubah suai warna sempadannya untuk mencapai kesan 50 yang pertama, dan kemudian putar bahagian kiri Separuh bulatan akan melakukan silap mata.

<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>

Kesannya adalah seperti berikut:

2. Bar kemajuan dinamik

Dinamik cssMalah, ia sama seperti statik.
Contoh ini ditulis pada kadar tetap, dan anda juga boleh mengubahnya mengikut keperluan anda sendiri.

<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>

Kesannya adalah seperti berikut:

Pembelajaran yang disyorkan: "tutorial video css"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan bar kemajuan gelung bulat dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!