CSS Only Donut Charts

by kthornbloom

HTML

<div class="progress-round" style="--progress: 80;">
</div>

<div class="progress-round" style="--progress: 20;">
</div>

CSS

.progress-round {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(
    hsl(calc(120 * var(--progress) / 100), 100%, 50%), 
    hsl(calc(120 * var(--progress) / 100), 100%, 50%) calc(var(--progress) * 1%), 
    #222 0
  );
  mask: radial-gradient(circle, transparent 44%, black 44%);
}

.progress-round::before,
.progress-round::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background:  hsl(calc(120 * var(--progress) / 100), 100%, 50%);
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -3px;
  transform-origin: 3px 15px;
}

.progress-round::after {
  transform: rotate(calc(var(--progress) * 3.6deg));
}


body {
  background: black;
}