Pure CSS Pie Charts and Progress Rings with conic-gradient

Data dashboards frequently incorporate circular completion rings, donut charts, and pie meters. Loading heavy chart rendering libraries or inline SVG geometries for simple percentage meters adds unnecessary DOM nodes and script overhead.

The conic-gradient() CSS function creates color transitions rotated around a central point, making it effortless to render pie charts and progress gauges in pure CSS.

Example #

A pure CSS circular completion meter indicating 75% progress:

<div class="progress-ring" style="--percent: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <span class="progress-label">75%</span>
</div>

Implementation #

Using conic-gradient combined with a centered inner mask or pseudo-element creates a clean donut chart:

.progress-ring {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: conic-gradient(
    var(--primary) calc(var(--percent) * 1%),
    var(--lightgray) 0
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Inner cutout creating the donut hole */
.progress-ring::before {
  content: "";
  position: absolute;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background-color: #ffffff;
}

.progress-label {
  position: relative;
  font-size: 22px;
  font-weight: 700;
  color: var(--blue);
}

Main Point: CSS conic-gradient enables lightweight, responsive pie charts and gauge visualizations driven directly by CSS custom properties without third-party chart libraries.

Credits #

Photo by Simone Hutsch on Unsplash

← Home