A simple-ish PHP/SVG/CSS Radial progress chart

radial.php

<style>
  div.goal-meter .progression {
    transform: rotate(-90deg);
  }
  div.goal-meter .progression .meter {
      stroke-linecap: round;
      fill: none;
  }
  div.goal-meter .progression #face {
      stroke: #EEE;
  }
   div.goal-meter .progression #face {
      stroke: red;
  }
</style>

<?php
// Required fields
$progress = 0.50; // Percentage divided by 100
$dimension = 200; // In pixels, the meter is always square so only needs one value
$stroke_width = 20; // Thinkness of the doughnut
// Calculations
$radius = ( $dimension - $stroke_width ) / 2;
$dasharray = $radius * 2 * pi();
$dashoffset = ( 1 - $progress ) * $dasharray;
// The meter
echo '<div class="goal-meter" style="width: ' . $dimension . 'px">';
echo '<svg class="progression" width="' . $dimension . '" height="' . $dimension . '">';
echo '<circle class="meter" id="face" cx="50%" cy="50%" r="' . $radius . '" stroke-width="' . $stroke_width . '"/>';
echo '<circle class="meter" id="indicator" cx="50%" cy="50%" r="' . $radius . '" stroke-width="' . $stroke_width . '" stroke-dasharray="' . round($dasharray, 3) . '" stroke-dashoffset="' . round($dashoffset, 3) . '" />';
echo '</svg></div>';
?>

A progress bar in a circle

This is based on this tutorial by the clever Greg Douglas. I adapted his static SVG/LESS model to work with my project where goals and progress varied. I even managed to animate it using keyframes and stroke-dashoffset (set at the calculated value) at 0%.

I guess it would also be easy to add an inner circle to create an Apple watch style effect. I won't confuse this gist though.