correct circular #progress animation to be 100% like the ux design pr…

…ototype
dnbexperience · May 19, 2019 · 6b99a2b · 6b99a2b
1 parent e05ce05
commit 6b99a2b
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 21 deletions.
diff --git a/packages/dnb-ui-lib/src/components/progress/ProgressCircular.js b/packages/dnb-ui-lib/src/components/progress/ProgressCircular.js
@@ -10,15 +10,20 @@ export default class ProgressCircular extends PureComponent {
   render() {
     return (
       <div className="dnb-progress__circular">
-        <Circle className="dnb-progress__circular__bg" />
-        <Circle className="dnb-progress__circular__line" />
+        <Circle className="dnb-progress__circular__line dark paused" />
+        <Circle className="dnb-progress__circular__line light" />
+        <Circle className="dnb-progress__circular__line dark" />
       </div>
     )
   }
 }
 
 const Circle = ({ className }) => (
-  <svg className={className} viewBox="0 0 32 32">
+  <svg
+    className={className}
+    viewBox="0 0 32 32"
+    shapeRendering="optimizeSpeed"
+  >
     <circle
       className="dnb-progress__circular__circle"
       fill="none"

diff --git a/packages/dnb-ui-lib/src/components/progress/style/_progress.scss b/packages/dnb-ui-lib/src/components/progress/style/_progress.scss
@@ -1,12 +1,12 @@
 /*
- * Progress component
+ * Progress complightnt
  *
  */
 
 :root {
-  --progress-circular-circle: 80;
+  --progress-circular-circle: 88;
   --progress-circular-circle-offset--min: -1;
-  --progress-circular-circle-offset--max: -80;
+  --progress-circular-circle-offset--max: -88;
 }
 
 .dnb-progress {
@@ -29,45 +29,75 @@
     }
 
     &__line {
-      stroke-dasharray: 0, var(--progress-circular-circle);
-      stroke-dashoffset: 0;
-
-      // animation details
-      animation-name: progress-circular-line;
-      animation-duration: 1.5s;
+      animation-duration: 2s;
       animation-delay: 200ms;
-      animation-iteration-count: infinite;
       animation-timing-function: linear;
+      animation-iteration-count: infinite;
+    }
 
-      opacity: 0;
+    &__line.light {
+      // z-index: 2;
+      animation-name: progress-circular-line-light;
+      stroke-dasharray: var(--progress-circular-circle),
+        var(--progress-circular-circle);
+      stroke-dashoffset: var(--progress-circular-circle-offset--min);
+    }
+    &__line.dark {
+      // z-index: 3;
+      animation-name: progress-circular-line-dark;
+      stroke-dasharray: var(--progress-circular-circle),
+        var(--progress-circular-circle);
+      stroke-dashoffset: var(--progress-circular-circle-offset--min);
+    }
+    &__line.dark.paused {
+      // z-index: 1;
+      animation-play-state: paused;
     }
 
     &__circle {
       stroke-linecap: round;
-      stroke: var(--color-emerald-green);
     }
-    &__line &__circle {
+    &__line.light &__circle {
       stroke: var(--color-mint-green);
     }
+    &__line.dark &__circle {
+      stroke: var(--color-emerald-green);
+    }
   }
 }
 
-@keyframes progress-circular-line {
+@keyframes progress-circular-line-light {
   0% {
-    stroke-dasharray: 0, var(--progress-circular-circle);
+    stroke-dasharray: var(--progress-circular-circle),
+      var(--progress-circular-circle);
     stroke-dashoffset: var(--progress-circular-circle-offset--min);
-    opacity: 1;
   }
   50% {
     stroke-dasharray: var(--progress-circular-circle),
       var(--progress-circular-circle);
     stroke-dashoffset: var(--progress-circular-circle-offset--min);
-    opacity: 1;
   }
   100% {
     stroke-dasharray: var(--progress-circular-circle),
       var(--progress-circular-circle);
     stroke-dashoffset: var(--progress-circular-circle-offset--max);
-    opacity: 1;
+  }
+}
+
+@keyframes progress-circular-line-dark {
+  0% {
+    stroke-dasharray: var(--progress-circular-circle),
+      var(--progress-circular-circle);
+    stroke-dashoffset: var(--progress-circular-circle-offset--min);
+  }
+  50% {
+    stroke-dasharray: var(--progress-circular-circle),
+      var(--progress-circular-circle);
+    stroke-dashoffset: var(--progress-circular-circle-offset--max);
+  }
+  100% {
+    stroke-dasharray: var(--progress-circular-circle),
+      var(--progress-circular-circle);
+    stroke-dashoffset: var(--progress-circular-circle-offset--max);
   }
 }