如何将4步SCSS圆形进度指示器改为5步？排查P3显示异常

将原有4步CSS圆形进度指示器扩展为5步后，P1、P2阶段显示正常，但P3阶段显示异常，尝试在Fiddle中复现问题未果，需找出问题并完成代码修正。

原有代码 #

SCSS代码 #

.myact__progress-indicator {
  position:relative;
  width:34px;
  height:34px;
  border-radius:50%;
  border:2px solid $twe-grey-lightest;
}

.myact__progress-indicator-progress {
    position:absolute;
    width:34px;
    height:34px;
    border-radius:17px;
  clip:rect(0px, 34px, 34px, 17px);
  margin:-2px;

  &:before {
        position:absolute;
    display:block;
    content:'';
        width:34px;
        height:34px;
    background-color:$twe-green;
        border-radius:17px;
      clip:rect(0px, 17px, 34px, 0px);
      transform:rotate(0deg);
  }
  &:after {
        position:absolute;
    display:block;
    content:'';
        width:34px;
        height:34px;
    background-color:$twe-green;
        border-radius:17px;
      clip:rect(17px, 34px, 34px, 17px);
      transform:rotate(90deg);
  }
  &.p1 {
    &:before {
        transform:rotate(72deg);
    }
  }
  &.p2 {
    &:before {
        transform:rotate(144deg);
    }
  }
  &.p3 {
    clip:rect(0px, 34px, 34px, 0px);

    &:before {
        transform:rotate(144deg);
    }
    &:after {
        transform:rotate(90deg);
    }
  }
  &.p4 {
    clip:rect(0px, 34px, 34px, 0px);

    &:before {
        transform:rotate(216deg);
    }
    &:after {
        transform:rotate(72deg);
    }
  }
  &.p5 {
    clip:rect(0px, 34px, 34px, 0px);

    &:before {
        clip:rect(0px, 34px, 34px, 0px);
        transform:rotate(0deg);
    }
    &:after {
        display:none;
    }
  }
}

HTML代码 #

<div class="myact__progress-indicator">
  <div class="myact__progress-indicator-progress p{{r.fields[6].value + 1}}"></div>
  <div class="myact__progress-indicator-inner">
    <span class="myact__progress-indicator-label">{{r.fields[6].value+1}}/5</span>
  </div>
</div>

问题分析 #

5步进度每步对应72°（360°/5），P3阶段需完成3/5的进度（216°）。原有P3的代码存在两个核心问题：

• 修改容器clip属性后，未正确调整:before和:after的旋转角度，导致进度显示错位
• 未利用:after元素覆盖右半部分剩余进度，仅依赖:before无法完整呈现216°的进度

修正后的SCSS代码 #

.myact__progress-indicator {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid $twe-grey-lightest;
}

.myact__progress-indicator-progress {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 17px;
  clip: rect(0px, 34px, 34px, 17px);
  margin: -2px;

  &:before {
    position: absolute;
    display: block;
    content: '';
    width: 34px;
    height: 34px;
    background-color: $twe-green;
    border-radius: 17px;
    clip: rect(0px, 17px, 34px, 0px);
    transform: rotate(0deg);
  }

  &:after {
    position: absolute;
    display: block;
    content: '';
    width: 34px;
    height: 34px;
    background-color: $twe-green;
    border-radius: 17px;
    clip: rect(17px, 34px, 34px, 17px);
    transform: rotate(90deg);
  }

  // P1: 1/5 = 72°
  &.p1 {
    &:before {
      transform: rotate(72deg);
    }
  }

  // P2: 2/5 = 144°
  &.p2 {
    &:before {
      transform: rotate(144deg);
    }
  }

  // P3: 3/5 = 216°（左半部分180° + 右半部分36°）
  &.p3 {
    clip: rect(0px, 34px, 34px, 0px); // 显示整个左半圆区域

    &:before {
      transform: rotate(180deg); // 左半部分完全填充
    }
    &:after {
      transform: rotate(126deg); // 右半部分填充36°（90°+36°）
    }
  }

  // P4: 4/5 = 288°（左半部分180° + 右半部分108°）
  &.p4 {
    clip: rect(0px, 34px, 34px, 0px);

    &:before {
      transform: rotate(180deg);
    }
    &:after {
      transform: rotate(198deg); // 右半部分填充108°（90°+108°）
    }
  }

  // P5: 5/5 = 360°，完全填充
  &.p5 {
    clip: rect(0px, 34px, 34px, 0px);

    &:before {
      clip: rect(0px, 34px, 34px, 0px);
      transform: rotate(0deg);
    }
    &:after {
      display: none;
    }
  }
}

修正说明 #

1. P3阶段：
   • 容器clip设为rect(0px, 34px, 34px, 0px)，显示整个左半圆区域
   • :before旋转180°，完全填充左半圆（180°）
   • :after旋转126°，填充右半圆的36°，合计216°，对应3/5进度
2. P4阶段：
   • 同样显示左半圆容器，:before填充左半圆，:after旋转198°，填充右半圆的108°，合计288°，对应4/5进度
3. 保持P1、P2、P5的逻辑不变，确保各阶段进度显示准确

内容的提问来源于stack exchange，提问作者Madison Courto