Add svg progress circle

zumerlab · Mar 17, 2023 · 22ad67d · 22ad67d
1 parent eecbca9
commit 22ad67d
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 4 deletions.
diff --git a/css/index.css b/css/index.css
@@ -37,6 +37,10 @@
   /* width connector */
   --connector-width: 40px;
   --label-width: 50px;
+  /* svg */
+  --val: 0;
+  --diam: 180;
+  --stroke: 12;
 }
 
 .z-container {
@@ -3427,4 +3431,43 @@ div[class^=ring].ccw {
 .item.xxl > .ring-6 > .item.stationary.lower {
   --x: calc((var(--xxl) / 2 * var(--ring-6-factor)) - (calc(var(--xxl) / 4)));
   transform: rotate(calc(var(--angle) * var(--item-number) * 1deg)) translate(var(--x), 0);
+}
+
+svg {
+  transform: rotate(-90deg);
+  width: calc(var(--diam) * 1px);
+  height: calc(var(--diam) * 1px);
+}
+
+.base {
+  cx: calc(var(--diam) / 2);
+  cy: calc(var(--diam) / 2);
+  r: calc(var(--diam) / 2 - var(--stroke));
+  fill: none;
+  stroke: #e6e6e6;
+  stroke-width: var(--stroke);
+}
+
+.percent {
+  cx: calc(var(--diam) / 2);
+  cy: calc(var(--diam) / 2);
+  r: calc(var(--diam) / 2 - var(--stroke));
+  fill: none;
+  stroke: #186ddd;
+  stroke-width: var(--stroke);
+  stroke-dasharray: 100;
+  stroke-linecap: round;
+  stroke-dashoffset: calc(100 - var(--val));
+}
+
+.p50 {
+  --val: 28;
+}
+
+.sixty {
+  --val: 60;
+}
+
+.ninety {
+  --val: 90;
 }/*# sourceMappingURL=index.css.map */
diff --git a/css/index.css.map b/css/index.css.map
diff --git a/dist/css/index.min.css b/dist/css/index.min.css
diff --git a/dist/css/index.min.css.map b/dist/css/index.min.css.map
diff --git a/index.html b/index.html
@@ -55,7 +55,12 @@
       <div class="ring-1 items-5 ">
         <div class="item s box">A</div>
         <div class="item s rounded">N</div>
-        <div class="item l">D</div>
+        <div class="item l"> 
+          <svg >
+              <circle class="base" />
+              <circle class="percent p50" pathLength="100" />
+          </svg>
+    </div>
         <div class="item s">Y</div>
         <div class="item s">!</div>
       </div>

diff --git a/src/index.scss b/src/index.scss
@@ -88,6 +88,12 @@
    /* width connector */
    --connector-width: 40px;
    --label-width: 50px;
+
+   /* svg */
+   --val: 0;
+   --diam: 180;
+   --stroke: 12;
+
  }
 
  .z-container {
@@ -363,3 +369,44 @@
    }
  }
 
+ // Progress
+
+
+svg {
+  transform: rotate(-90deg);
+  width: calc(var(--diam) * 1px);
+  height: calc(var(--diam) * 1px);
+}
+
+.base {
+  cx: calc(var(--diam) / 2);
+  cy: calc(var(--diam) / 2);
+  r: calc(var(--diam) / 2 - var(--stroke));
+  fill: none;
+  stroke: #e6e6e6;
+  stroke-width: var(--stroke); 
+}
+.percent {
+  cx: calc(var(--diam) / 2);
+  cy: calc(var(--diam) / 2);
+  r: calc(var(--diam) / 2 - var(--stroke));
+  fill: none;
+  stroke: #186ddd;
+  stroke-width: var(--stroke); 
+  stroke-dasharray: 100;
+  stroke-linecap: round;
+  stroke-dashoffset: calc(100 - var(--val));
+}
+
+.p50 {
+  --val: 28;
+}
+
+.sixty {
+  --val: 60;
+}
+
+.ninety {
+  --val: 90;
+}
+