一分钟实现一个半圆进度条

背景：在最近的需求中要做一个半圆的进度条、本来就是H5的项目、使用的三方的UI组件库是vant2x发现在组件库的circle环形进度条并不能满足需求、经过调研发现东西看着简单还是有点小技巧的、特此记录一下

要实现的效果大致如下：

通过上方UI交互方式、下面就让我们简单的实现一下：

准备思路：

写一个div、然后通过改变边框其中的两条颜色、变成圆形实现旋转即可、如下图：

具体实现：

html

<div class="circular-content">
    <div class="circulars">
      <div class="ring"></div>
    </div>
</div>

css

  .ring {
        height: 750px;
        width: 750px;
        border-width: 20px;
        border-color: #ead2a7 #ead2a7 #626262 #626262;
        border-style: solid;
        box-sizing: border-box;
        position: relative;
        border-radius: 100%;
        transform: rotate(315deg);
        transition: 1.5s ease-out;
  }

实现效果

简单的两段代码就可以直接实现到第四步、其他要做的就是隐藏圆形的下半部分、然后点击进行旋转即可。

具体实现：

html

<div class="circular-content">
    <div class="circulars">
      <div class="ring"></div>
    </div>
</div>

css

 .circular-content {
  width: 100%;
  height: 612px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  .circulars {
    height: 750px;
    width: 750px;
    position: relative;
    position: absolute;
    top: 230px;
    left: 50%;
    transform: translateX(-50%);

    &::after {
      content: "";
      display: block;
      height: 375px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
    }

    .ring {
      height: 750px;
      width: 750px;
      border-width: 20px;
      border-color: #ead2a7 #ead2a7 #626262 #626262;
      border-style: solid;
      box-sizing: border-box;
      position: relative;
      border-radius: 100%;
      // transform: rotate(315deg); // 满值
       // transform:rotate(135deg); // 初始值  180/10 = 18
       transform:rotate(153deg); // 初始值v2
      transition: 1.5s ease-out;

      .double-circle {
        position: absolute;
        top: 592px;
        left: 592px;
        width: 41px;
        height: 41px;

        &::after {
          content: "";
          display: block;
          width: 41px;
          height: 41px;
          background: #ffeece;
          opacity: 0.2;
          border-radius: 100%;
          position: absolute;
        }

        &::before {
          content: "";
          display: block;
          width: 23px;
          height: 23px;
          background: #ffe6b9;
          border-radius: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}

实现效果：

接下来我们只要控制transform的角度就可以达到动态加载的效果；剩余的根据场景进行定位即可； 因为完整代码较多，可以参考完成的例子