CSSで循環ループのプログレスバーを実装する方法-フロントエンドQ&A-php.cn

CSSで循環ループのプログレスバーを実装する方法

藏色散人

リリース： 2023-01-31 10:05:09

オリジナル

2407 人が閲覧しました

CSS で円形ループのプログレスバーを実装する方法: 1. 最も外側の親リングを作成します。2. 「クリップパス」を使用して 2 つの半円を描画し、親円を覆うように絶対配置します。リング。3. 50 未満の場合は、右の半円を回転させて親リングの色をゆっくりと表示します。 4. 50 を超える場合は、右の半円の回転度を 0 に設定し、その境界線の色を変更して次の効果を実現します。最初の 50 です。次に、左の半円を回転させて効果を実現します。

CSSで循環ループのプログレスバーを実装する方法

このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョン、DELL G3 コンピューター

循環ループの実装方法CSSのプログレスバー?

リングプログレスバーの CSS 実装

1. 静的プログレスバー

まず、静的プログレスバーを見てみましょう

最初のステップは、もちろん、最も外側の親リングを実装することです。
2 番目のステップでは、
clip-path を通して 2 つの半円を描き、親リングを覆うようにそれらを絶対に配置します。
50 未満の場合は、右の半円を回転させ、親リングの色をゆっくりと明らかにするだけで効果が得られます。
50 より大きい場合、最初に最初の 50 に移動するプロセスに従い、次に右半円の回転角度を 0 に設定し、境界線の色を変更して次の効果を実現します。最初の 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で循環ループのプログレスバーを実装する方法

2. 動的進行状況バー

動的

css実際には、静的と同じです。 この例は固定ペースで書かれており、必要に応じて変更することもできます。

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

ログイン後にコピー

効果は次のとおりです:

CSSで循環ループのプログレスバーを実装する方法