Recast Templates for skipping overview page. Added Zenjob's templates. Some notes.

Custom_Templates/customer_templates/Recast Software/_progress_circle.html.liquid

@@ -0,0 +1,80 @@
+<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>