fix(spinner): style CSS props

ionic-team · Jul 12, 2018 · 2798bb0 · 2798bb0
1 parent 92e32d8
commit 2798bb0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 27 deletions.
diff --git a/core/src/components/spinner/spinner-configs.ts b/core/src/components/spinner/spinner-configs.ts
@@ -6,16 +6,15 @@ export const SPINNERS: SpinnerConfigs = {
     dur: 1000,
     lines: 12,
     fn: (dur: number, index: number, total: number) => {
-      const transform = 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)';
-      const animationDelay = -(dur - ((dur / total) * index)) + 'ms';
+      const transform = `rotate(${ 30 * index + (index < 6 ? 180 : -180) }deg)`;
+      const animationDelay = `${ (dur * index / total) - dur }ms`;
+
       return {
         y1: 17,
         y2: 29,
         style: {
-          transform: transform,
-          webkitTransform: transform,
-          animationDelay: animationDelay,
-          webkitAnimationDelay: animationDelay
+          'transform': transform,
+          'animation-delay': animationDelay,
         }
       };
     }
@@ -25,16 +24,14 @@ export const SPINNERS: SpinnerConfigs = {
     dur: 1000,
     lines: 12,
     fn: (dur: number, index: number, total: number) => {
-      const transform = 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)';
-      const animationDelay = -(dur - ((dur / total) * index)) + 'ms';
+      const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`;
+      const animationDelay = `${ (dur * index / total) - dur }ms`;
       return {
         y1: 12,
         y2: 20,
         style: {
-          transform: transform,
-          webkitTransform: transform,
-          animationDelay: animationDelay,
-          webkitAnimationDelay: animationDelay
+          'transform': transform,
+          'animation-delay': animationDelay,
         }
       };
     }
@@ -44,14 +41,14 @@ export const SPINNERS: SpinnerConfigs = {
     dur: 1000,
     circles: 9,
     fn: (dur: number, index: number, total: number) => {
-      const animationDelay = -(dur - ((dur / total) * index)) + 'ms';
+      const animationDelay = `${ (dur * index / total) - dur }ms`;
+      const angle = 2 * Math.PI * index / total;
       return {
         r: 5,
         style: {
-          top: (9 * Math.sin(2 * Math.PI * index / total)) + 'px',
-          left: (9 * Math.cos(2 * Math.PI * index / total)) + 'px',
-          animationDelay: animationDelay,
-          webkitAnimationDelay: animationDelay
+          'top': `${ 9 * Math.sin(angle) }px`,
+          'left': `${ 9 * Math.cos(angle) }px`,
+          'animation-delay': animationDelay,
         }
       };
     }
@@ -61,14 +58,15 @@ export const SPINNERS: SpinnerConfigs = {
     dur: 1000,
     circles: 8,
     fn: (dur: number, index: number, total: number) => {
-      const animationDelay = -(dur - ((dur / total) * index)) + 'ms';
+      const step = index / total;
+      const animationDelay = `${(dur * step) - dur}ms`;
+      const angle = 2 * Math.PI * step;
       return {
         r: 5,
         style: {
-          top: (9 * Math.sin(2 * Math.PI * index / total)) + 'px',
-          left: (9 * Math.cos(2 * Math.PI * index / total)) + 'px',
-          animationDelay: animationDelay,
-          webkitAnimationDelay: animationDelay
+          'top': `${ 9 * Math.sin(angle)}px`,
+          'left': `${ 9 * Math.cos(angle) }px`,
+          'animation-delay': animationDelay,
         }
       };
     }
@@ -93,9 +91,8 @@ export const SPINNERS: SpinnerConfigs = {
       return {
         r: 6,
         style: {
-          left: (9 - (9 * index)) + 'px',
-          animationDelay: animationDelay,
-          webkitAnimationDelay: animationDelay
+          'left': `${ 9 - (9 * index)}px`,
+          'animation-delay': animationDelay,
         }
       };
     }

diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx
@@ -103,7 +103,7 @@ export class Spinner {
 
 function buildCircle(spinner: SpinnerConfig, duration: number, index: number, total: number) {
   const data = spinner.fn(duration, index, total);
-  data.style.animationDuration = duration + 'ms';
+  data.style['animation-duration'] = `${duration}ms`;
 
   return (
     <svg viewBox="0 0 64 64" style={data.style}>
@@ -115,7 +115,7 @@ function buildCircle(spinner: SpinnerConfig, duration: number, index: number, to
 
 function buildLine(spinner: SpinnerConfig, duration: number, index: number, total: number) {
   const data = spinner.fn(duration, index, total);
-  data.style.animationDuration = duration + 'ms';
+  data.style['animation-duration'] = `${duration}ms`;
 
   return (
     <svg viewBox="0 0 64 64" style={data.style}>