Implementation ideas
As shown in the figure: Noted properties:
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
Table of contents Example Method 1: delete Method...
Table of contents 1. Introduction to NFS 2. NFS C...
Table of contents 1. Installation 2. Import into ...
Front-end project packaging Find .env.production ...
If you have developed DApps on Ethereum, you may ...
How PHP works First, let's understand the rel...
I searched for many ways to change it online but ...
Table of contents 1. What is Set 2. Set Construct...
The multi-site feature of WordPress allows you to...
This article example shares the specific code of ...
Vue card flip carousel display, while switching d...
The logs in MySQL include: error log, binary log,...
This article mainly introduces the sample code of...
Table of contents Understand the core concept of ...
Table of contents APIs used Simple Example person...