<div class="np-card-content np-card-content-vertical np-card-padding align-center">
      <h3 class="np-card-content-title">
        {{name}}
      </h3>
<svg
   class="progress-ring"
   width="120"
   height="120">
  <circle
    class="progress-ring__circle circle-{{name}}"
    stroke="white"
    stroke-width="4"
    fill="transparent"
    r="52"
    cx="60"
    cy="60"/>
    <text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="2px" dy=".3em">{{count}}</text>
</svg>
</div>

<script>
$(document).ready(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;
  console.log(offset)
  circle.style.strokeDashoffset = offset;
}
setProgress('{{ count | divided_by: total }}')
}) 
</script>