new directory

customer_templates/One Network/_progress_circle.html.liquid

@@ -0,0 +1,37 @@
+<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="#51c5cf" 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>