3

Hi I am attempting to make a 'donut chart' in the center that looks the following:

enter image description here

This is displayed using the following code:

:root {
  --size: 90px;
  --bord: 20px;
}

.chart {
  width: var(--size);
  height: var(--size);
  margin: 1em auto;
  border-radius: 50%;
  background-image: conic-gradient(lightseagreen var(--value), lightgrey var(--value));
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--bord));
  height: calc(100% - var(--bord));
  background: white;
  border-radius: inherit;
}

.x-60 {
  --value: 60%;
}

.x-20 {
  --value: 20%;
}
<div class="chart x-60">

</div>

I want to make the background from 'white' to transparent so it shows the wooden image in the background whilst still retaining the 'border'.

How do I achieve this as changing the background to none simply makes the 'circle' a pie chart: enter image description here

Thanks.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Zack Antony Bucci
  • 571
  • 1
  • 12
  • 29

1 Answers1

4

Use mask with a radial-gradient to create a hole

:root {
  --size: 80px;
  --bord: 10px;
}

.chart {
  width: var(--size);
  height: var(--size);
  margin: 1em auto;
  border-radius: 50%;
  background: conic-gradient(lightseagreen var(--value), lightgrey var(--value));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--bord)),#fff calc(100% - var(--bord) + 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--bord)),#fff calc(100% - var(--bord) + 1px));
}

.x-60 {
  --value: 60%;
}

.x-20 {
  --value: 20%;
}

body {
  background:linear-gradient(to right,yellow,blue);
}
<div class="chart x-60">

</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Cheers pal. Is there anyway I can get the border to animate around on the page load using keyframes? – Zack Antony Bucci Mar 31 '20 at 10:13
  • @ZackAntonyBucci animate the conic gradient? – Temani Afif Mar 31 '20 at 10:14
  • Yes. Or in other words the 'border'. – Zack Antony Bucci Mar 31 '20 at 10:17
  • @ZackAntonyBucci with your current code, it would be difficult. We need to change it but this will make the answer irrelevant to your actual question. You can ask another question for the animation or edit this one to include the animation part (but better ask another question to keep the question focused) – Temani Afif Mar 31 '20 at 10:21
  • Thank you for your help. If i wanted to change the bar colours can i simply do it in Javascript by targetting the .chart and setting the $(chart).css("background", "background: conic-gradient(COLOR1 var(--value), COLOR2 var(--value))"); – Zack Antony Bucci Mar 31 '20 at 10:23
  • @ZackAntonyBucci do it with a CSS variable like you did with percentage. Related: https://stackoverflow.com/a/49618941/8620333 – Temani Afif Mar 31 '20 at 10:24