From a469de3674a5dc1c9553da6178ebdc513d40df64 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Sat, 24 Apr 2021 16:54:16 +0200
Subject: [PATCH] dasharray with units (fix for Firefox) #27

---
 src/components/LoadingIndicator.vue       | 14 +++++++-------
 tests/components/LoadingIndicator.spec.js |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/LoadingIndicator.vue b/src/components/LoadingIndicator.vue
index cfde477..efc2e8b 100644
--- a/src/components/LoadingIndicator.vue
+++ b/src/components/LoadingIndicator.vue
@@ -24,7 +24,7 @@ export default {
     circleProgress () {
       const dash = (50.24 * this.progress) / 100
       const space = 50.24 - dash
-      return `${dash}, ${space}`
+      return `${dash}px, ${space}px`
     },
     animationClass () {
       return this.progress === undefined ? 'loading' : 'progress'
@@ -48,22 +48,22 @@ export default {
 }
 
 .loading .loader-svg.front {
-  stroke-dasharray: 40.24;
+  stroke-dasharray: 40.24px;
   animation: fill-animation-loading 1s cubic-bezier(1,1,1,1) 0s infinite;
 }
 
 @keyframes fill-animation-loading {
   0% {
-    stroke-dasharray: 10 40.24;
+    stroke-dasharray: 10px 40.24px;
     stroke-dashoffset: 0;
   }
   50% {
-    stroke-dasharray: 25.12;
-    stroke-dashoffset: 25.12;
+    stroke-dasharray: 25.12px;
+    stroke-dashoffset: 25.12px;
   }
   100% {
-    stroke-dasharray: 10 40.24 ;
-    stroke-dashoffset: 50.24;
+    stroke-dasharray: 10px 40.24px;
+    stroke-dashoffset: 50.24px;
   }
 }
 
diff --git a/tests/components/LoadingIndicator.spec.js b/tests/components/LoadingIndicator.spec.js
index 95098e2..b1a80da 100644
--- a/tests/components/LoadingIndicator.spec.js
+++ b/tests/components/LoadingIndicator.spec.js
@@ -19,6 +19,6 @@ describe('LoadingIndicator.vue', () => {
     })
     // The lendth of circle in the component is 50.24. If progress is 50% then resulting arc
     // should be 25.12
-    expect(wrapper.find('.loader-svg.front').element.style.strokeDasharray).to.equal('25.12, 25.12')
+    expect(wrapper.find('.loader-svg.front').element.style.strokeDasharray).to.equal('25.12px, 25.12px')
   })
 })