Donut

The donut (.donut) is a ring chart for showing a proportion or a small set of proportions as colored arcs around a circle, typically paired with a centered value/caption and an optional legend. Like progress, FlickUI supplies no chart-drawing JavaScript — you compute and set the SVG stroke-dasharray yourself.

72% Complete

<div class="donut donut-success donut-mode-value">
  <div class="donut-graphic">
    <svg class="donut-svg" viewBox="0 0 36 36" aria-hidden="true">
      <circle class="donut-track" cx="18" cy="18" r="16"></circle>
      <circle class="donut-arc" cx="18" cy="18" r="16" stroke-dasharray="72 100.5"></circle>
    </svg>
    <div class="donut-center">
      <span class="donut-value">72%</span>
      <span class="donut-caption">Complete</span>
    </div>
  </div>
</div>