So implementieren Sie einen Kreisschleifen-Fortschrittsbalken in CSS

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:

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

  Nach dem Login kopieren
  clip-path画出两个半圆，并绝对定位覆盖在父级圆环。

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

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

效果如下图：

二、动态进度条

动态的cssDer Effekt ist wie folgt:

Empfohlenes Lernen: „CSS-Video-Tutorial