The CSS implements a circular gradient progress bar

Implementation approach

  • The outermost is a large circle (gradient)
  • Draw two semicircle inside the inner part of the circle. Hide the gradient circle (for the sake of visibility, the left and right sides are different colors, set it to grey and blue).
  • Rotate the blue semicircle on the right clockwise to reveal the gradient below, for example by 45 degrees (45/360 = 12.5%), and then set the blue right semicircle to gray to create a pie chart of 12.5.
  • Try to rotate the right semicircle by a larger degree. After rotating it by 180 degrees, the right semicircle coincided, and then rotated again, the degree seemed to be getting smaller and smaller, which did not meet our needs. We should return the right circle to its original position, set its background color to be the same as the background color, and rotate the left semicircle clockwise.
  • Finally, add a small white circle at the bottom and place it in the center to show the percentage as shown in the figure below:

Attributes noted:

  1. Background-image, used to set one or more background images for an element, can be achieved by Linear-gradient gradient gradient.
  2. Clip, which defines which parts of an element are visible. The Clip attribute applies only to elements in position: Absolute.
The following code draws a 33% circle
<div class="circle-bar">
    <div class="circle-bar-left"></div>
    <div class="circle-bar-right"></div>
    <div class="mask">
        <span class="percent">33%</span>
    </div>
</div>
Copy the code
.circle-bar {
    background-image: linear-gradient(#7affaf.#7a88ff);
    width: 182px;
    height: 182px;
    position: relative;
}
.circle-bar-left {
    background-color: #e9ecef;
    width: 182px;
    height: 182px;
    clip: rect(0.91px, auto, 0);
}
.circle-bar-right {
    background-color: #e9ecef;
    width: 182px;
    height: 182px;
    clip: rect(0, auto, auto, 91px);
    transform: rotate(118.8 deg);
}
.mask {
    width: 140px;
    height: 140px;
    background-color: #fff;
    text-align: center;
    line-height: 0.2 em;
    color: rgba(0.0.0.0.5);
    position: absolute;
    left: 21px;
    top: 21px;
}
.mask > span {
    display: block;
    font-size: 44px;
    line-height: 150px;
}
/* All offspring are centered horizontally and vertically, making them concentric circles */
.circle-bar * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
/* itself and its children are circles */
.circle-bar..circle-bar > * {
    border-radius: 50%;
}
Copy the code