Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use pure CSS to achieve pie chart". In daily operation, I believe many people have doubts about how to use pure CSS to achieve pie chart. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "how to use pure CSS to achieve pie chart". Next, please follow the editor to study!

This article is the translation of free translation.

Please slide to the end of the text for the complete code.

We use only one div and only css to implement the pie chart.

HTMl structure 60%

We added several variables for css:

-- p: the percentage of the progress bar (pure number, without%), and the pie chart value is consistent with the div content (with%).

-- b: the value of the border thickness

-- c: the body color of the border

This article uses abbreviated variables, and in order to achieve readability in a production environment, we should use-- p->-- percentage,-- b-border-thickness,-- c-main-color.

Basic settings of Pie

We set the basic style for the pie chart.

.pie {--w: 150px; / /-- w->-- width width: var (--w); aspect-ratio: 1; / / aspect ratio, 1 means square display: inline-grid; place-content: center; margin: 5px; font-size: 25px; font-weight: bold; font-family: sans-serif;}

Above we use aspect-ratio: 1; make sure that div is square, of course, you can also use height: var (--w) to achieve the effect.

Next, we use pseudo elements to implement a simple pie chart:

.pie: before {content: ", position: absoute; border-radius: 50%; inset: 0; / knowledge point 1 background: conic-gradient (var (--c) calc (var (--p) * 1%), # 0000 0); / / knowledge point 2}

Knowledge point 1: inset: 0; equivalent to top: 0; right: 0; bottom: 0; top: 0

Knowledge point 2: conic-gradient cone gradient, css method, more, where # 0000 is the hexadecimal of transparent.

# 0000 Hex Color Red (0) Green (0) Blue (0)

After conic-gradient application:

In order to make the area that is only the border visible, we use the mask attribute to hide the middle circle. We will use the radial-gradient () method:

Radial-gradient (farthest-side,red calc (99%-var (--b)), blue calc (100%-var (--b))

After the above code is applied, the results are as follows:

Our goal is as follows:

We can do this by changing the code:

60%.pie {--wvar 150px; width: var (--w); aspect-ratio: 1; position: relative; display: inline-grid; place-content: center; margin: 5px; font-size: 25px; font-weight: bold; font-family: sans-serif;}. Pie:before {content: "; position: absolute; border-radius: 50%; inset: 0 Background: conic-gradient (var (--c) calc (var (--p) * 1), # 0000 0);-webkit-mask:radial-gradient (farthest-side,#0000 calc (99-var (--b)), # 000 calc (100-var (--b)); mask:radial-gradient (farthest-side,#0000 calc (99-var (--b)), # 000 calc (100-var (--b) } add a circular edge

How to add a circular edge? take a look at the following illustration and you will understand this tip.

For the effect on the figure (1), the circle is placed at the beginning edge.

Pie: before {background: radial-gradient (farthest-side, var (--c) 98%, # 0000) top/var (--b) var (--b) no-repeat, conic-gradient (var (--c) calc (var (--p) * 1%), # 0000 0);}

For the effect on the figure (2), the circle is placed on the edge of the end.

Pipe: after {content: "; position: absolute; border-radius: 50%; inset: calc (50-var (--b) / 2); / / knowledge point 1 background: var (--c); transform: rotate (calc (var (--p) * 3.6deg)) translateY (calc (50-var (--w) / 2)); / / knowledge point 2}

Knowledge point 1: inset: 0; we also mentioned above-- it is an abbreviation for left: 0; right: 0; bottom: 0; top: 0;.

Here we have:

Left = right = 50%-bAccord 2

Here we move the element to the left and right by 50%-b stroke 2, which means that the element has a width of b and is centered left and right. For height, the same goes for it.

Knowledge point 2: calculation of degree of rotation

Angle = percentage * 360deg / 100

The element is rotated by the appropriate degree, and then its position is moved, which involves centering on the Y axis. It may be a little difficult to understand the text, combined with the following illustrations:

Add Animation

So far, we have implemented a still pie chart. Let's add a dynamic effect to it next.

Register the variable first:

@ property-- p {syntax:'; inherits: true; initial-value: 0;}

Next, we create keyframes:

@ keyframes p {from {--p: 0}}

Note: here we only need to set the-p value of from. Browsers will automatically match the values in our preset to (div class= "pie" style= "- pvv 60;" > 60%)

Finally, we call the animation.

Animation: p 1s .5s both

Hey hey ~ copy the following code and try it. Of course, we also provide Gif diagrams (see the end of the article).

Code and renderings 20% 40% 80% 90%@property-- p {syntax:''; inherits: true; initial-value: 1;}. Pie {--relative; display:'; true; initial-value: 1;}. Pie {--relative; display:'; place-content: 25px; font-weight: bold: 25px; font-weight: bold Font-family: sans-serif;} .pie: before,.pie:after {content: "; position: absolute; border-radius: 50%;} .pie:before {inset: 0; background: radial-gradient (farthest-side,var (--c) 98% top/var (--b) var (--b) no-repeat, conic-gradient (var (--c) calc (var (--p) * 1%), # 0000 0) -webkit-mask: radial-gradient (farthest-side,#0000 calc (99%-var (--b)), # 000 calc (100%-var (--b)); mask: radial-gradient (farthest-side,#0000 calc (99%-var (--b)), # 000 calc (100%-var (--b));}. Pie:after {inset: calc (50%-var (--b) / 2); background: var (--c) Transform: rotate (calc (var (--p) * 3.6deg) translateY (calc (50-var (--w) / 2));} .animate {animation: P 1s .5s both;} .no-round:before {background-size: 00, auto;}. No-round:after {content: none } @ keyframes p {from {--pCSS 0}} this is the end of the study on "how to use pure CSS to implement a pie chart". I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.