<div class="np-progress-ring-wrapper">
  <svg
    class="progress-ring"
    width="{{ size }}"
    height="{{ size }}">
    <circle
      class="progress-ring__circle circle-bg"
      stroke="{{ stroke_color_bg }}"
      stroke-width="15"
      fill="transparent"
      r="52"
      cx="60"
      cy="60"/>
    <circle
      class="progress-ring__circle circle-{{name}}"
      stroke="{{ stroke_color }}"
      stroke-width="15"
      fill="transparent"
      r="52"
      cx="60"
      cy="60"/>   
      <text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="#35404E" dy=".3em">{{count}}%</text>
  </svg>
</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(count, total) {
        var percent = parseInt(count) / parseInt(total)
       // console.log(percent)
        const offset = circumference - percent * circumference;
        //console.log(offset)
        circle.style.strokeDashoffset = offset;
      }

      setProgress('{{count}}', '{{total}}')
  }) 
</script>

<style>
  .np-progress-ring-wrapper {
    flex: 0;
    flex-direction: column;
    display: flex;
    width: 100%;
    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 {
    text-transform: uppercase;
    font-size:0.875rem;
    margin-top:1rem;
  }

  @media (min-width:768px) {
    .progress-ring text { font-size:2rem; }
  }
</style>

<style>
  .progress-circle-container {
    background: #F8FBFF;
    padding: 16px;
  }
</style>