simplify math

shoelace-style · Sep 21, 2021 · c67c84d · c67c84d
1 parent 2ba6a3b
commit c67c84d
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/components/progress-ring/progress-ring.styles.ts b/src/components/progress-ring/progress-ring.styles.ts
@@ -30,7 +30,7 @@ export default css`
   .progress-ring__track,
   .progress-ring__indicator {
     --radius: calc(var(--size) / 2 - var(--track-width) * 2);
-    --circumference: calc(var(--radius) * 2 * var(--pi));
+    --circumference: calc(var(--radius) * 2 * 3.141592654);
 
     fill: none;
     stroke-width: var(--track-width);
@@ -48,7 +48,7 @@ export default css`
     stroke-linecap: round;
     transition: 0.35s stroke-dashoffset;
     stroke-dasharray: var(--circumference) var(--circumference);
-    stroke-dashoffset: calc(var(--circumference) - (var(--percentage) / 100) * var(--circumference));
+    stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
   }
 
   .progress-ring__label {

diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts
@@ -35,9 +35,9 @@ export default class SlProgressRing extends LitElement {
         aria-valuemax="100"
         aria-valuenow="${this.percentage}"
       >
-        <svg class="progress-ring__image" style="--percentage: ${this.percentage}; --pi: ${Math.PI.toFixed(10)}">
+        <svg class="progress-ring__image">
           <circle class="progress-ring__track"></circle>
-          <circle class="progress-ring__indicator"></circle>
+          <circle class="progress-ring__indicator" style="--percentage: ${this.percentage / 100};"></circle>
         </svg>
 
         <span part="label" class="progress-ring__label">