CSS sample code to achieve circular gradient progress bar effect

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:

percent

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!

<<:  A "classic" pitfall of MySQL UPDATE statement

>>:  Interpretation and usage of various React state managers

Recommend

How to use Vue-router routing

Table of contents 1. Description 2. Installation ...

Docker uses root to enter the container

First run the docker container Run the command as...

How to solve the slow speed of MySQL Like fuzzy query

Question: Although the index has been created, wh...

How to replace all tags in html text

(?i) means do not match case. Replace all uppercas...

How to insert weather forecast into your website

We hope to insert the weather forecast into the w...

JS implements the snake game

Table of contents 1. Initialization structure 2. ...

Web page html special symbols html special characters comparison table

Special symbols Named Entities Decimal encoding S...

js+css to realize three-level navigation menu

This article example shares the specific code of ...

How to implement JavaScript output of Fibonacci sequence

Table of contents topic analyze Basic solution Ba...

Detailed explanation of React component communication

Table of contents Component Communication Introdu...

Analysis of different MySQL table sorting rules error

The following error is reported when MySQL joins ...