A Quick CSS Pie Chart

When building an application, often it's useful to visually indicate a percentage like how close a task is to being completed.  This is easily achieved by dropping in the following CSS into your page:

.pie-chart {
    --pie-size: 0%;
    --pie-diameter: 20px;
    --pie-fg-color: #99ba32;
    --pie-bg-color: #ccc;
    width: var(--pie-diameter);
    height: var(--pie-diameter);
    background-image: conic-gradient(var(--pie-fg-color) var(--pie-size), var(--pie-bg-color) 0%);
    border-radius: 50%;
}

...and then if you want to show a pie-chart which is 75% full, you add the following HTML to your page:

<div class="pie-chart" style="--pie-size: 75%" title="75% completed"></div>

If everything is working as expected, you should see something like this:

As you can see, with very little markup, we have created a little icon which quickly shows a user that something is 75% of whatever we're trying to measure (in this example, we are 75% complete).  Of course we can override the other variables to change the defaults - like so:

<div class="pie-chart" style="--pie-size: 46%; --pie-diameter:60px; --pie-fg-color: blue; --pie-bg-color: red;"></div>

...which should look like so:

It's important to note that this requires a modern browser and is supported on the latest versions of Chrome, Edge, Firefox, and Safari.  It will not work with Internet Explorer as it relies on CSS variables.