Background: Recent requirements to make a semicircular progress bar, the original H5 project, using a tripartite UI component library arevant2xFound in the component librarycircleThe circular progress bar is not enough to meet the needs. After investigation, I found that things look simple or a little tricky. Here is a record

The effect to be achieved is roughly as follows:

Through the above UI interaction mode, let's simply implement it:

Preparation ideas:

Write a div and rotate it by changing the two colors of the border to a circle, as shown below:

Concrete implementation:

html

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

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.5 s ease-out;
  }
Copy the code

Implementation effect

Two simple pieces of code go straight to step 4. All you have to do is hide the bottom half of the circle and click rotate.

Concrete implementation:

html

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

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); / / / / full valuetransform:rotate(135deg); / / initial value180/10 = 18
       transform:rotate(153deg); // Initial value v2transition: 1.5 s 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%);
        }
      }
    }
  }
}
Copy the code

Effect:

Next, we only need to control the Angle of the transform to achieve dynamic loading effect; The rest can be located according to the scene; Because there is more complete code, you can refer to the completed example