Voortgangsbalk rond

.pie 
{
  width: 128px;
  aspect-ratio: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 100%;
}

.pie:before, .pie:after
{
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: conic-gradient(yellow 100%,#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:before {background: conic-gradient(yellow 100%,#0000 0);}
.pie:after {background: conic-gradient(#ff6400 calc(var(--p)*1%),#0000 0); z-index: 10;}

echo "<div class='pie' style='--p:60;--b:12px;'>60%</div>";