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

JavaScript removes unnecessary properties of an object

Table of contents Example Method 1: delete Method...

Steps for Vue3 to use mitt for component communication

Table of contents 1. Installation 2. Import into ...

How to deploy the crownblog project to Alibaba Cloud using docker

Front-end project packaging Find .env.production ...

How to deploy Solidity smart contracts using ethers.js

If you have developed DApps on Ethereum, you may ...

Detailed explanation of Vue save automatic formatting line break

I searched for many ways to change it online but ...

Detailed explanation of JavaScript's Set data structure

Table of contents 1. What is Set 2. Set Construct...

Vue uses filters to format dates

This article example shares the specific code of ...

Vue implements card flip carousel display

Vue card flip carousel display, while switching d...

Analysis of MySQL general query log and slow query log

The logs in MySQL include: error log, binary log,...

HTML n ways to achieve alternate color code sample code

This article mainly introduces the sample code of...

In-depth understanding of the use of Vue

Table of contents Understand the core concept of ...

Detailed explanation of angular parent-child component communication

Table of contents APIs used Simple Example person...