CSS에서 순환 루프 진행 표시줄을 구현하는 방법

CSS에서 원형 루프 진행률 표시줄을 구현하는 방법: 1. 가장 바깥쪽 상위 링을 만듭니다. 2. "클립 경로"를 통해 두 개의 반원을 그리고 절대적으로 상위 링 위에 배치합니다. 오른쪽 반원을 회전하여 천천히 상위 링의 색상을 표시합니다. 4. 값이 50보다 크면 오른쪽 반원의 회전 각도를 0으로 설정하고 테두리 색상을 수정하여 처음 50의 효과를 얻은 다음 회전합니다. 왼쪽 반원이 트릭을 수행합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전, DELL G3 컴퓨터

CSS에서 순환 루프 진행률 표시줄을 구현하는 방법은 무엇입니까?

링 진행률 표시줄을 구현하는 CSS

1. 정적 진행률 표시줄

먼저 정적 진행률 표시줄을 살펴보겠습니다. 에 가장 바깥쪽 상위 링을 먼저 구현합니다.

• 두 번째 단계는 clip-path를 통해 두 개의 반원을 그리고 절대적으로 상위 링 위에 배치하는 것입니다.

• 이 50보다 작으면 오른쪽 반원만 회전하고 부모 링의 색상을 천천히 드러내면 효과를 얻을 수 있습니다. 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

가 50보다 큰 경우 먼저 처음 50으로 이동한 다음 오른쪽 반원의 회전 각도를 0으로 설정하고 테두리 색상을 수정하여 처음 50의 효과를 얻은 다음 회전합니다. 효과를 얻으려면 왼쪽 반원을 사용하세요.

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

효과는 다음과 같습니다:

2. 동적 진행률 표시줄

🎜동적 css는 실제로 정적 진행률과 동일합니다. 🎜 이 예제는 고정된 속도로 작성되었으며 필요에 따라 변경할 수도 있습니다. 🎜rrreee🎜효과는 다음과 같습니다.🎜🎜🎜🎜추천 학습: "🎜css 비디오 튜토리얼🎜"🎜🎜

위 내용은 CSS에서 순환 루프 진행 표시줄을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!