🔥 implements the pie chart using only one DIV and CSS

This article is a free translation of the translation.

Please slide to the bottom for the complete code.

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

HTMl structure

<div class="pie" style="--p:60; --b:10px; --c:purple;">60%</div>
Copy the code

We added a few CSS variables:

• --p: Percentage of progress bar (pure numbers, without %), pie chart value anddivContent (with %) is consistent.
• --b: Border thickness value
• --c: The body color of the border

This article uses shorthand variables. For readability in the production environment, we should use –p -> –percentage, –b -> –border-thickness, –c -> –main-color.

Basic setup of Pie

We set the basic style for the pie chart.

.pie {
  --w: 150px; // --w -> --width
  width: var(--w);
  aspect-ratio: 1; // aspect ratio,1It says squaredisplay: inline-grid;
  place-content: center;
  margin: 5px;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}
Copy the code

Above we used aspect-ratio: 1; Make sure the div is square, and of course you can use height: var(–w) for this effect.

Next, we implement a simple pie chart using pseudo-elements:

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

• Knowledge point 1:inset: 0;The equivalent oftop: 0; right: 0; bottom: 0; top: 0;
• Knowledge point 2:conic-gradientTaper gradient, CSS method,More contentHere,# 0000 是 transparentIn hexadecimal.

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

After the conIC-gradient application:

To make only the border area visible, we use the mask attribute to hide the portion of the middle circle. We will use the radial-gradient() method:

radial-gradient(farthest-side,red calc(99% - var(--b)),blue calc(100% - var(--b)))
Copy the code

After the above code is applied, the effect picture can be obtained as follows:

Our goal is as follows:

We can do this by changing the code:

<div class="pie" style="--p:60; --b:10px; --c:purple;">60%</div>
Copy the code

.pie {
  --w: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)));
}
Copy the code

Add rounded edges

How to add rounded edges? See the illustration below to see how to add rounded edges.

For effect (1), place the circle 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);
}
Copy the code

For effect (2), place the circle on the edge of the end.

.pipe: after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: calc(50% - var(--b)/2); / / knowledge1
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6 deg)) translateY(calc(50% - var(--w)/2)); / / knowledge2
}
Copy the code

Inset: 0; We also mentioned above — it’s left: 0; right: 0; bottom: 0; top: 0; The shorthand.

Here we have:

left = right = 50% - b/2
Copy the code

So here we’ve moved the element 50% to the left and right, minus b over 2, which is equal to the width of the element is B, and it’s centered. Same thing for height.

How to calculate the rotation degree of

angle = percentage * 360deg / 100
Copy the code

First rotate the element by the appropriate degree, then move its position, which involves centering the Y-axis. Read the text may be a little difficult to understand, combined with the following illustration to understand:

Add animation

So far, we have implemented a static pie chart. We’re going to add kinetic effects to it.

Register variables first:

@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
Copy the code

Next, we create keyframes:

@keyframes p {
  from{-p: 0}}Copy the code

Note: Here we only need to set the –p value of from. Div class=”pie” style=”–p:60;” > < / div > 60%)

Finally, we call the animation.

animation: p 1s .5s both;
Copy the code

Hey hey ~ copy the following code to experience it. Of course, we also provide giFs (see below).

Code and renderings

<div class="pie" style="--p:20"> 20%</div>
<div class="pie" style="--p:40; --c:darkblue; --b:10px"> 40%</div>
<div class="pie no-round" style="--p:60; --c:purple; --b:15px"> 60%</div>
<div class="pie animate no-round" style="--p:80; --c:orange;"> 80%</div>
<div class="pie animate" style="--p:90; --c:lightgreen"> 90%</div>
Copy the code

@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

.pie{-p:20;
  --b:22px;
  --c:darkred;
  --w:150px;

  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: 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%.# 0000) 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.6 deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation: p 1s .5s both;
}
.no-round:before {
  background-size: 0 0, auto;
}
.no-round:after {
  content: none;
}
@keyframes p{
  from{-p:0}}Copy the code

Effect:

The latter

原文 – How to Create a Pie Chart Using Only CSS

Unfortunately, the technique used above is not widely supported by existing browsers. You Can check Can I Use to see if the property is supported by the relevant version browser. Please try the effect of the blog post on the Google core browser.

PS: Of course, if you are building an internal system, don’t worry about support at all, please regulate your team’s use of the browser.

【 the 】