CSS sample code to achieve circular gradient progress bar effect

Implementation ideas

• The outermost is a big circle (gradient color)
• Draw two semicircles inside to cover the gradient circle (in order to make it more obvious, the colors of the left and right sides are different, set to gray-blue)
• Rotate the blue semicircle on the right clockwise, and the gradient circle below will be exposed. For example, rotate it 45 degrees (45/360 = 12.5%), and then set the blue right semicircle to gray, and a 12.5 pie chart will be drawn.
• Try to rotate a larger degree. After rotating 180 degrees, the right semicircle overlaps. If you rotate it further, the degree seems to be getting smaller and smaller, which does not meet our needs. We should return the circle on the right to its original position, set its background color to the same as the base color, and rotate the semicircle on the left clockwise.
• Finally, add a small white circle in the middle to show the percentage.

As shown in the figure:

Noted properties:

• background-image is used to set one or more background images for an element. Gradient colors can be achieved through linear-gradient.
• clip, defines which part of an element is visible. The clip property only applies to elements with 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">
        33%
    </div>
</div>

.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.8deg);
}
.mask {
    width: 140px;
    height: 140px;
    background-color: #fff;
    text-align: center;
    line-height: 0.2em;
    color: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 21px;
    top: 21px;
}
.mask > span {
    display: block;
    font-size: 44px;
    line-height: 150px;
}
/*All descendants are centered horizontally and vertically, so they are concentric circles*/
.circle-bar * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
/*Both the element itself and its sub-elements are circles*/
.circle-bar,
.circle-bar > * {
    border-radius: 50%;
}

This concludes this article about the sample code for implementing a circular gradient progress bar effect with CSS. For more CSS gradient progress bar content, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!