BirchStreet download. Fixed Cin7 and backed up all the templates. Sandbox templates.

Custom_Templates/customer_templates/BirchStreet Academy/_progress_circle.html.liquid

@@ -0,0 +1,104 @@
+<div class="np-progress-ring-wrapper">
+  <svg
+    class="progress-ring"
+    width="{{ size }}"
+    height="{{ size }}">
+    <circle
+      class="progress-ring__circle circle-bg "
+      stroke="{{ stroke_color_NS }}"
+      stroke-width="{{ stroke_width }}"
+      fill="transparent"
+      r="{{ r }}"
+      cx="{{ cx }}"
+      cy="{{ cy }}"/>
+    <circle
+      class="progress-ring__circle circle-IP"
+      stroke="{{ stroke_color_IP }}"
+      stroke-width="{{ stroke_width }}"
+      fill="transparent"
+      r="{{ r }}"
+      cx="{{ cx }}"
+      cy="{{ cy }}"/>
+    <circle
+      class="progress-ring__circle circle-CM"
+      stroke="{{ stroke_color_CM }}"
+      stroke-width="{{ stroke_width }}"
+      fill="transparent"
+      r="{{ r }}"
+      cx="{{ cx }}"
+      cy="{{ cy }}"/>
+  </svg>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var circleIP = document.getElementsByClassName("circle-IP")[0];
+    var circleCM = document.getElementsByClassName("circle-CM")[0];
+    var radius = circleIP.r.baseVal.value;
+    var circumference = radius * 2 * Math.PI;
+
+    circleIP.style.strokeDasharray = `${circumference} ${circumference}`;
+    circleIP.style.strokeDashoffset = `${circumference}`;
+
+    circleCM.style.strokeDasharray = `${circumference} ${circumference}`;
+    circleCM.style.strokeDashoffset = `${circumference}`;
+
+    function setProgress(circleNodeName, percent) {
+      let offset = circumference - percent * circumference;
+
+      if(circleNodeName == 'circleIP'){
+        circleIP.style.strokeDashoffset = offset;
+      } else {
+        circleCM.style.strokeDashoffset = offset;
+      }
+    }
+    setProgress('circleIP', '{{ countIP | divided_by: total }}')
+    setProgress('circleCM', '{{ countCM | divided_by: total }}')
+  }) 
+</script>
+
+<style>
+  .circle-IP{
+    transform: scale(-1, 1);
+  } 
+
+  .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 {
+    transition: stroke-dashoffset 0.35s;
+    transform: rotate(-90deg);
+    transform-origin: center;
+  }
+
+  .np-progress-circle-label {
+    color:#fff;
+    text-transform: uppercase;
+    font-size:0.875rem;
+    margin-top:1rem;
+  }
+  .bqUfwS{
+  display:none !important;
+  }
+
+  @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>