WilliamsSonoma sub navigation changes.

Custom_Templates/customer_templates/Crayon/_progress_circle.html.liquid

@@ -0,0 +1,47 @@
+<div class="progress-ring-wrapper">
+  <svg
+    class="progress-ring"
+    width="{{ size }}"
+    height="{{ size }}">
+    <circle
+      class="circle circle-bg"
+      stroke="{{ stroke_color_bg }}"
+      stroke-width="10"
+      fill="transparent"
+      r="52"
+      cx="60"
+      cy="60"
+    />
+    <circle
+      class="circle circle-{{ name }}"
+      stroke="{{ stroke_color }}"
+      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="{{ number_color }}" dy=".3em">
+      {{ count }}
+    </text>
+  </svg>
+  <h3 class="np-card-content-title progress-circle-label">
+    {{ name }}
+  </h3>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    let circle = document.getElementsByClassName("circle-{{ name }}")[0];
+    let radius = circle.r.baseVal.value;
+    let circumference = radius * 2 * Math.PI;
+
+    circle.style.strokeDasharray = `${circumference} ${circumference}`;
+    circle.style.strokeDashoffset = `${circumference}`;
+
+    function setProgress(percent) {
+      circle.style.strokeDashoffset = circumference - percent * circumference;
+    }
+    setProgress('{{ count | divided_by: total }}')
+  })
+</script>