Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie einen Kreisschleifen-Fortschrittsbalken in CSS

So implementieren Sie einen Kreisschleifen-Fortschrittsbalken in CSS

藏色散人
藏色散人Original
2023-01-31 10:05:092399Durchsuche

So implementieren Sie einen Kreisschleifen-Fortschrittsbalken in CSS: 1. Erstellen Sie einen äußersten übergeordneten Ring. 2. Zeichnen Sie zwei Halbkreise durch den „Clip-Pfad“ und positionieren Sie sie absolut über dem übergeordneten Ring. Zeigen Sie langsam die Farbe des übergeordneten Rings an, indem Sie den rechten Halbkreis um 4 drehen. Wenn er größer als 50 ist, stellen Sie den Rotationsgrad des rechten Halbkreises auf 0 ein, ändern Sie seine Randfarbe, um den Effekt der ersten 50 zu erzielen, und drehen Sie ihn dann die linke Seite Ein Halbkreis reicht aus.

So implementieren Sie einen Kreisschleifen-Fortschrittsbalken in CSS

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version, DELL G3-Computer

Wie implementiert man einen Kreisschleifen-Fortschrittsbalken in CSS?

... natürlich zu Implementieren Sie zuerst einen Der äußerste übergeordnete Ring.
Der zweite Schritt besteht darin, zwei Halbkreise durch clip-path zu zeichnen und sie absolut über dem übergeordneten Ring zu positionieren. Wenn

weniger als 50 beträgt, müssen wir nur den rechten Halbkreis drehen und langsam die Farbe des übergeordneten Rings sichtbar machen, um den Effekt zu erzielen. Wenn

größer als 50 ist, folgen wir zunächst dem Prozess, um zu den ersten 50 zu gelangen, setzen dann den Rotationsgrad des rechten Halbkreises auf 0, ändern seine Randfarbe, um den Effekt der ersten 50 zu erzielen, und drehen ihn dann den linken Halbkreis, um den Effekt zu erzielen.
<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>

Der Effekt ist wie folgt:

So implementieren Sie einen Kreisschleifen-Fortschrittsbalken in CSS
  • 2. Dynamischer Fortschrittsbalken

  • Dynamisches css ist eigentlich das gleiche wie das statische.
  • Dieses Beispiel ist in einem festen Tempo geschrieben und Sie können es auch nach Ihren eigenen Bedürfnissen ändern.

    <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>
    clip-path画出两个半圆,并绝对定位覆盖在父级圆环。
  • 小于50的时候,我们只需要通过旋转右半圆,慢慢透露出父级圆环的颜色,即可达到效果。

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

rrreee

效果如下图:
So implementieren Sie einen Kreisschleifen-Fortschrittsbalken in CSS

二、动态进度条

动态的cssDer Effekt ist wie folgt:


Empfohlenes Lernen: „So implementieren Sie einen Kreisschleifen-Fortschrittsbalken in CSSCSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Kreisschleifen-Fortschrittsbalken in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn