<div class="np-progress-ring-wrapper">
  <svg
    class="progress-ring"
    width="{{ size }}"
    height="{{ size }}">
    <circle
      class="progress-ring__circle circle-{{name}}"
      stroke="#29ABE2"
      stroke-width="10"
      fill="transparent"
      r="52"
      cx="60"
      cy="60"/>
    <circle
      class="progress-ring__circle circle-bg"
      stroke="{{ stroke_color_bg }}"
      stroke-width="10"
      fill="transparent"
      r="52"
      cx="60"
      cy="60"/>
      <text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="#323F48" dy=".3em">{{count}}</text>
  </svg>
  <h3 class="np-card-content-title np-progress-circle-label">
    {{name}}
  </h3>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var circle = document.getElementsByClassName("circle-{{name}}")[0];
    var radius = circle.r.baseVal.value;
    var circumference = radius * 2 * Math.PI;

    circle.style.strokeDasharray = `${circumference} ${circumference}`;
    circle.style.strokeDashoffset = `${circumference}`;

    function setProgress(percent) {
      const offset = circumference - percent * circumference;
      circle.style.strokeDashoffset = offset;
    }
    setProgress('{{ count | divided_by: total }}')
  }) 
</script>

<style>
  .np-progress-ring-wrapper {
    flex: 0;
    flex-direction: column;
    display: flex;
    width: 100%;
    padding: 1.5rem 1rem 1rem 1rem;
    align-items: center;
  }

  .progress-ring circle { stroke-linecap: round; }
  .progress-ring text { font-size:2rem; }
  .progress-ring__circle {
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: center;
  }

  .np-progress-circle-label {
    color:#323F48;
    text-transform: uppercase;
    opacity:0.35;
    font-size:0.875rem;
    margin-top:1rem;
  }

  @media (min-width:768px) {
    .np-progress-ring-wrapper { padding: 1.5rem 0.4rem 1rem 0.4rem;}
  }

  @media (min-width:1170px) {
    .progress-ring text { font-size:2.5rem; }
    .np-progress-ring-wrapper { padding: 1.5rem 1rem 1rem 1rem;}
  }
</style>