Ask and answer your own questions. I didn’t understand what I meant by the above answers. The one with animation effect is closer to what I want. In the end, I searched on codepen and found a similar demo, written by a Taiwanese:
Link Description

The idea is very simple. Write 6 p's, each representing a gradient. Use the angle of linear-gradient and the skew of css3 to spell the 6 p's as follows:

Then just cut out a ring.
The only thing I’m not sure about is why the transparency of the gradient is from 12% to 88%. I don’t know what the special purpose is. If you know, please give me some advice.

There is another cheating thing. When using gradients on the mobile terminal, you must pay attention to compatibility. Linear-gradient and angle standards with browser prefixes such as -webkit- are different. One is clockwise and the other is counterclockwise. My Android supports -webkit-linear-gradient, linear-gradient is not supported.
Link description

It can be realized with CSS:
1. Make an empty square p;
2. Set the pseudo-elements after and before of p to half the height and the same width of p, which is equivalent to p There is a half-height block element above and below;
3. Set the gradient of after and before respectively according to the required color;
4. Set after and before into semicircles through border-radius;
5. Place a smaller block element in the middle of p and set it to a circle through border-radius.

An example is as follows:
HTML

<p class="loading"><p class='loading-indicator'><i></i></p>

CSS

.loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #eee
}

.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    width: 50px;
    height: 50px;
}

.loading-indicator:before {
    content: "";
    display: block;
    width: 50px;
    height: 25px;
    padding-bottom: 0;
    box-sizing: border-box;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    background: -webkit-linear-gradient(0deg, #999, #bbb);
}

.loading-indicator:after {
    content: "";
    display: block;
    width: 50px;
    height: 25px;
    padding-top: 0;
    box-sizing: border-box;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    background: -webkit-linear-gradient(0deg, #eee, #bbb);
}

.loading-indicator>i {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    background: #eee;
    top: 5px;
    left: 5px;
    border-radius: 20px;
}

Animation can be added if necessary.

PS:
There is also a way to use background-clip to replace the i element in the middle. But this method has a problem on Android WeChat, the middle is not round.

codepen source code link description
The effect is as follows, there will be a spinning effect, and the color will keep changing.

You can use CSS3 and gradient to slowly adjust the color and see if you can restore it as much as possible

More troublesome.

It’s easy to implement the ring, but the trouble is the gradient.
The gradient of CSS3 is either a linear gradient along a straight line, or a radial gradient from the center of the circle outwards, and there is no gradient along the arc direction.

Maybe it can be achieved using svg, I don’t know if I haven’t tried it.

css3 is OK