{% assign radius = 93 %}
{% assign pi = 3.14159 %}
{% assign circumference = radius | times: 2 | times: pi %}
{% assign progress = count | times: 1.0 | divided_by: total %}
{% assign offset = 1 | minus: progress | times: circumference %}

{% assign circle_background_color = '#e5e9eb' %}
{% assign progress_number_color = '#1b3e4f' %}

<div class="progress-circle-wrapper">
  <svg
    class="progress-circle"
    width="212"
    height="212">
    <circle
      class="circle circle-bg"
      stroke="#6FCFEB"
      stroke-width="17"
      fill="transparent"
      r="{{ radius }}"
      cx="106"
      cy="106"
    />
    <circle
      class="circle"
      stroke="#185A7D"
      stroke-width="17"
      fill="transparent"
      r="{{ radius }}"
      cx="106"
      cy="106"
      stroke-dasharray="{{ circumference }} {{ circumference }}"
      stroke-dashoffset="{{ offset }}"
      style='transform: rotate(-90deg);transform-origin: 50% 50%;'
    />
    <text class='dt' x="50%" y="60%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="{{ progress_number_color }}" dy=".3em">
      <tspan x="50%" dy="0em" class="progress-circle-big-text">{{count}}</tspan>
      <tspan x="50%" dy="1.4em" class="progress-circle-text">of {{ total }}</tspan>
    </text>
  </svg>
</div>