react-spinners-kit - npm Package Compare versions

Comparing version 1.6.0 to 1.7.0

package.json

 {
     "name": "react-spinners-kit",
-    "version": "1.6.0",
+    "version": "1.7.0",
     "description": "A collection of loading spinners",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

@@ -57,37 +57,37 @@ # react-spinners-kit
 
-| Spinner          | Size | Color   | FrontColor | BackColor |
-| ---------------- | ---- | ------- | ---------- | --------- |
-| BallSpinner      | 40   | #00ff89 | -          | -         |
-| BarsSpinner      | 40   | #00ff89 | -          | -         |
-| CircleSpinner    | 30   | #fff    | -          | -         |
-| CubeSpinner      | 25   | -       | #00ff89    | #686769   |
-| DominoSpinner    | 100  | #686769 | -          | -         |
-| FillSpinner      | 20   | #686769 | -          | -         |
-| FireworkSpinner  | 40   | #fff    | -          | -         |
-| FlagSpinner      | 40   | #fff    | -          | -         |
-| GridSpinner      | 40   | #fff    | -          | -         |
-| GuardSpinner     | 40   | -       | #00ff89    | #686769   |
-| HeartSpinner     | 40   | #fff    | -          | -         |
-| ImpulseSpinner   | 40   | -       | #00ff89    | #686769   |
-| PulseSpinner     | 40   | #fff    | -          | -         |
-| PushSpinner      | 30   | #686769 | -          | -         |
-| SequenceSpinner  | 40   | -       | #00ff89    | #686769   |
-| SphereSpinner    | 30   | #fff    | -          | -         |
-| SpiralSpinner    | 40   |         | #00ff89    | #686769   |
-| StageSpinner     | 40   | #fff    | -          | -         |
-| SwapSpinner      | 40   | #686769 | -          | -         |
-| WaveSpinner      | 30   | #fff    | -          | -         |
-| ClapSpinner      | 30   | -       | #00ff89    | #686769   |
-| RotateSpinner    | 45   | #00ff89 | -          | -         |
-| SwishSpinner     | 40   | -       | #4b4c56    | #fff      |
-| GooSpinner       | 55   | #fff    | -          | -         |
-| CombSpinner      | 100  | #fff    | -          | -         |
-| PongSpinner      | 60   | #4b4c56 | -          | -         |
-| RainbowSpinner   | 50   | #fff    | -          | -         |
-| RingSpinner      | 30   | #00ff89 | -          | -         |
-| HoopSpinner      | 45   | #4b4c56 | -          | -         |
-| FlapperSpinner   | 30   | #00ff89 | -          | -         |
-| MagicSpinner     | 70   | #fff    | -          | -         |
-| JellyfishSpinner | 60   | #4b4c56 | -          | -         |
-| TraceSpinner     | 70   | -       | #00ff89    | #4b4c56   |
+| Spinner          | Size: number | Color: string | FrontColor: string | BackColor: string | SizeUnit: string |
+| ---------------- | ------------ | ------------- | ------------------ | ----------------- | ---------------- |
+| BallSpinner      | 40           | #00ff89       | -                  | -                 | px               |
+| BarsSpinner      | 40           | #00ff89       | -                  | -                 | px               |
+| CircleSpinner    | 30           | #fff          | -                  | -                 | px               |
+| CubeSpinner      | 25           | -             | #00ff89            | #686769           | px               |
+| DominoSpinner    | 100          | #686769       | -                  | -                 | px               |
+| FillSpinner      | 20           | #686769       | -                  | -                 | px               |
+| FireworkSpinner  | 40           | #fff          | -                  | -                 | px               |
+| FlagSpinner      | 40           | #fff          | -                  | -                 | px               |
+| GridSpinner      | 40           | #fff          | -                  | -                 | px               |
+| GuardSpinner     | 40           | -             | #00ff89            | #686769           | px               |
+| HeartSpinner     | 40           | #fff          | -                  | -                 | px               |
+| ImpulseSpinner   | 40           | -             | #00ff89            | #686769           | px               |
+| PulseSpinner     | 40           | #fff          | -                  | -                 | px               |
+| PushSpinner      | 30           | #686769       | -                  | -                 | px               |
+| SequenceSpinner  | 40           | -             | #00ff89            | #686769           | px               |
+| SphereSpinner    | 30           | #fff          | -                  | -                 | px               |
+| SpiralSpinner    | 40           |               | #00ff89            | #686769           | px               |
+| StageSpinner     | 40           | #fff          | -                  | -                 | px               |
+| SwapSpinner      | 40           | #686769       | -                  | -                 | px               |
+| WaveSpinner      | 30           | #fff          | -                  | -                 | px               |
+| ClapSpinner      | 30           | -             | #00ff89            | #686769           | px               |
+| RotateSpinner    | 45           | #00ff89       | -                  | -                 | px               |
+| SwishSpinner     | 40           | -             | #4b4c56            | #fff              | px               |
+| GooSpinner       | 55           | #fff          | -                  | -                 | px               |
+| CombSpinner      | 100          | #fff          | -                  | -                 | px               |
+| PongSpinner      | 60           | #4b4c56       | -                  | -                 | px               |
+| RainbowSpinner   | 50           | #fff          | -                  | -                 | px               |
+| RingSpinner      | 30           | #00ff89       | -                  | -                 | px               |
+| HoopSpinner      | 45           | #4b4c56       | -                  | -                 | px               |
+| FlapperSpinner   | 30           | #00ff89       | -                  | -                 | px               |
+| MagicSpinner     | 70           | #fff          | -                  | -                 | px               |
+| JellyfishSpinner | 60           | #4b4c56       | -                  | -                 | px               |
+| TraceSpinner     | 70           | -             | #00ff89            | #4b4c56           | px               |
 
@@ -94,0 +94,0 @@ ## Development

src/components/ball/index.js

@@ -10,3 +10,3 @@ import React from "react";
     25% {
-        transform: translateX(${props.size / 2}px) scale(0.25);
+        transform: translateX(${props.size / 2}${props.sizeUnit}) scale(0.25);
     }
@@ -17,3 +17,3 @@ 50% {
     75% {
-        transform: translateX(-${props.size / 2}px) scale(0.25);
+        transform: translateX(${-props.size / 2}${props.sizeUnit}) scale(0.25);
     }
@@ -26,7 +26,7 @@ 100% {
 
-export const BallSpinner = ({ size, color, loading }) => {
+export const BallSpinner = ({ size, color, loading, sizeUnit }) => {
     return (
         loading && (
             <Wrapper size={size}>
-                <Ball color={color} size={size} />
+                <Ball color={color} size={size} sizeUnit={sizeUnit} />
             </Wrapper>
@@ -41,9 +41,9 @@ )
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size / 2}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size / 2}${props.sizeUnit}`};
 `;
 
 const Ball = styled.div`
-    width: ${props => props.size / 3}px;
-    height: ${props => props.size / 3}px;
+    width: ${props => `${props.size / 3}${props.sizeUnit}`};
+    height: ${props => `${props.size / 3}${props.sizeUnit}`};
     border-radius: 50%;
@@ -59,2 +59,3 @@ background-color: ${props => props.color};
     color: "#00ff89",
+    sizeUnit: "px",
 };
@@ -66,2 +67,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/bars/index.js

@@ -7,13 +7,13 @@ import React from "react";
     0% {
-        width: ${props.size / 20}px
+        width: ${props.size / 20}${props.sizeUnit}
     }
     50% {
-        width: ${props.size / 6}px
+        width: ${props.size / 6}${props.sizeUnit}
     }
     100% {
-        width: ${props.size / 20}px
+        width: ${props.size / 20}${props.sizeUnit}
     }
 `;
 
-const getBars = (countBars, color, size) => {
+const getBars = (countBars, color, size, sizeUnit) => {
     const bars = [];
@@ -25,2 +25,3 @@ for (let i = 0; i < countBars; i++) {
                 size={size}
+                sizeUnit={sizeUnit}
                 x={i * (size / 5 + size / 25) - size / 12}
@@ -35,7 +36,9 @@ key={i.toString()}
 
-export const BarsSpinner = ({ size, color, loading }) => {
+export const BarsSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBars = 5;
     return (
         loading && (
-            <Wrapper size={size}> {getBars(countBars, color, size)} </Wrapper>
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getBars(countBars, color, size, sizeUnit)}
+            </Wrapper>
         )
@@ -50,4 +53,4 @@ );
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
 `;
@@ -57,6 +60,6 @@
     position: absolute;
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
-    width: ${props => props.size / 20}px;
-    height: ${props => props.size}px;
+    top: ${props => `${props.y}${props.sizeUnit}`};
+    left: ${props => `${props.x}${props.sizeUnit}`};
+    width: ${props => `${props.size / 20}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
     background-color: ${props => props.color};
@@ -71,2 +74,3 @@ animation: ${motion} 1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
     color: "#00ff89",
+    sizeUnit: "px",
 };
@@ -78,2 +82,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/circle/index.js

@@ -14,4 +14,4 @@ import React from "react";
 
-export const CircleSpinner = ({ size, color, loading }) => {
-    return loading && <Wrapper size={size} color={color} />;
+export const CircleSpinner = ({ size, color, loading, sizeUnit }) => {
+    return loading && <Wrapper size={size} color={color} sizeUnit={sizeUnit} />;
 };
@@ -23,5 +23,6 @@
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
-    border: ${props => props.size / 5}px solid ${props => props.color};
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
+    border: ${props => `${props.size / 5}${props.sizeUnit}`} solid
+        ${props => props.color};
     border-right-color: transparent;
@@ -36,2 +37,3 @@ border-radius: 50%;
     color: "#fff",
+    sizeUnit: "px",
 };
@@ -43,2 +45,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/clap/index.js

@@ -16,17 +16,21 @@ import React from "react";
     0% {
-        transform: translateX(${props.x}px) translateY(${
+        transform: translateX(${props.x}${props.sizeUnit}) translateY(${
     props.y
-}px) scale(1.25) ;
+}${props.sizeUnit}) scale(1.25) ;
     }
     5% {
-        transform: translateX(${props.x}px) translateY(${
+        transform: translateX(${props.x}${props.sizeUnit}) translateY(${
     props.y
-}px) scale(1.75);
+}${props.sizeUnit}) scale(1.75);
     }
     50% {
-        transform: translateX(${props.x}px) translateY(${props.y}px) scale(.25);
+        transform: translateX(${props.x}${props.sizeUnit}) translateY(${
+    props.y
+}${props.sizeUnit}) scale(.25);
     }
     55% {
         background-color: ${props.backColor};
-        transform: translateX(${props.x}px) translateY(${props.y}px) scale(1) ;
+        transform: translateX(${props.x}${props.sizeUnit}) translateY(${
+    props.y
+}${props.sizeUnit}) scale(1) ;
     }
@@ -43,2 +47,3 @@ `;
     ballSize,
+    sizeUnit,
 }) => {
@@ -56,2 +61,3 @@ const balls = [];
                 size={size}
+                sizeUnit={sizeUnit}
                 x={y}
@@ -67,3 +73,9 @@ y={x}
 
-export const ClapSpinner = ({ size, frontColor, backColor, loading }) => {
+export const ClapSpinner = ({
+    size,
+    frontColor,
+    backColor,
+    loading,
+    sizeUnit,
+}) => {
     const radius = size / 2;
@@ -75,3 +87,3 @@ const countBalls = 7;
         loading && (
-            <Wrapper size={size}>
+            <Wrapper size={size} sizeUnit={sizeUnit}>
                 {getBalls({
@@ -85,2 +97,3 @@ countBalls,
                     ballSize,
+                    sizeUnit,
                 })}
@@ -97,4 +110,4 @@ </Wrapper>
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
     animation: ${rotate} 1.5s linear infinite;
@@ -105,10 +118,10 @@ `;
     position: absolute;
-    top: ${props => props.size / 2}px;
-    left: ${props => props.size / 2}px;
-    width: ${props => props.ballSize}px;
-    height: ${props => props.ballSize}px;
+    top: ${props => `${props.size / 2}${props.sizeUnit}`};
+    left: ${props => `${props.size / 2}${props.sizeUnit}`};
+    width: ${props => `${props.ballSize}${props.sizeUnit}`};
+    height: ${props => `${props.ballSize}${props.sizeUnit}`};
     border-radius: 50%;
     background-color: ${props => props.frontColor};
-    transform: translateX(${props => props.x}px)
-        translateY(${props => props.y}px);
+    transform: translateX(${props => `${props.x}${props.sizeUnit}`})
+        translateY(${props => `${props.y}${props.sizeUnit}`});
     animation: ${props => move(props)} 2.5s cubic-bezier(0.075, 0.82, 0.165, 1)
@@ -124,2 +137,3 @@ infinite;
     backColor: "#4b4c56",
+    sizeUnit: "px",
 };
@@ -132,2 +146,3 @@
     backColor: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/comb/index.js

@@ -11,7 +11,13 @@ import React from "react";
 
-const getBars = ({ countBars, color, size }) => {
+const getBars = ({ countBars, color, size, sizeUnit }) => {
     const bars = [];
     for (let i = 0; i < countBars; i++) {
         bars.push(
-            <Bar color={color} size={size} key={i.toString()} index={i} />,
+            <Bar
+                color={color}
+                size={size}
+                key={i.toString()}
+                sizeUnit={sizeUnit}
+                index={i}
+            />,
         );
@@ -22,7 +28,7 @@ }
 
-export const CombSpinner = ({ size, color, loading }) => {
+export const CombSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBars = size / 9;
     return (
         loading && (
-            <Wrapper size={size}>
+            <Wrapper size={size} sizeUnit={sizeUnit}>
                 {getBars({
@@ -32,2 +38,3 @@ countBars,
                     size,
+                    sizeUnit,
                 })}
@@ -41,4 +48,4 @@ </Wrapper>
     position: relative;
-    width: ${props => props.size}px;
-    height: ${props => props.size / 5}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size / 5}${props.sizeUnit}`};
 `;
@@ -49,5 +56,5 @@
     left: 0;
-    width: ${props => props.size / 60}px;
-    height: ${props => props.size / 5}px;
-    left: ${props => props.index * 9}px;
+    width: ${props => `${props.size / 60}${props.sizeUnit}`};
+    height: ${props => `${props.size / 5}${props.sizeUnit}`};
+    left: ${props => `${props.index * 9}${props.sizeUnit}`};
     transform-origin: center bottom;
@@ -64,2 +71,3 @@ transform: rotate(-90deg);
     color: "#fff",
+    sizeUnit: "px",
 };
@@ -71,2 +79,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/cube/index.js

@@ -10,14 +10,50 @@ import React from "react";
 
-export const CubeSpinner = ({ size, backColor, frontColor, loading }) => {
+export const CubeSpinner = ({
+    size,
+    backColor,
+    frontColor,
+    loading,
+    sizeUnit,
+}) => {
     return (
         loading && (
-            <Wrapper size={size}>
-                <CubeWrapper x={0} y={0}>
-                    <Cube size={size}>
-                        <Side front={true} size={size} color={frontColor} />
-                        <Side back={true} size={size} color={frontColor} />
-                        <Side bottom={true} size={size} color={backColor} />
-                        <Side top={true} size={size} color={backColor} />
-                        <Side left={true} size={size} color={backColor} />
-                        <Side right={true} size={size} color={backColor} />
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                <CubeWrapper x={0} y={0} sizeUnit={sizeUnit}>
+                    <Cube size={size} sizeUnit={sizeUnit}>
+                        <Side
+                            front={true}
+                            size={size}
+                            color={frontColor}
+                            sizeUnit={sizeUnit}
+                        />
+                        <Side
+                            back={true}
+                            size={size}
+                            color={frontColor}
+                            sizeUnit={sizeUnit}
+                        />
+                        <Side
+                            bottom={true}
+                            size={size}
+                            color={backColor}
+                            sizeUnit={sizeUnit}
+                        />
+                        <Side
+                            top={true}
+                            size={size}
+                            color={backColor}
+                            sizeUnit={sizeUnit}
+                        />
+                        <Side
+                            left={true}
+                            size={size}
+                            color={backColor}
+                            sizeUnit={sizeUnit}
+                        />
+                        <Side
+                            right={true}
+                            size={size}
+                            color={backColor}
+                            sizeUnit={sizeUnit}
+                        />
                     </Cube>
@@ -35,5 +71,5 @@ </CubeWrapper>
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
-    perspective: ${props => props.size * 4}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
+    perspective: ${props => `${props.size * 4}${props.sizeUnit}`};
 `;
@@ -43,4 +79,4 @@
     sposition: absolute;
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
+    top: ${props => `${props.y}${props.sizeUnit}`};
+    left: ${props => `${props.x}${props.sizeUnit}`};
     width: inherit;
@@ -52,4 +88,4 @@ height: inherit;
     position: relative;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
     transform-style: preserve-3d;
@@ -91,3 +127,3 @@ animation: ${rotate} 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
         rotateY(${props => rotateYCube(props)}deg)
-        translateZ(${props => props.size / 2}px);
+        translateZ(${props => `${props.size / 2}${props.sizeUnit}`});
 `;
@@ -100,2 +136,3 @@
     backColor: "#4b4c56",
+    sizeUnit: "px",
 };
@@ -108,2 +145,3 @@
     backColor: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/domino/index.js

@@ -7,35 +7,53 @@ import React from "react";
     0% {
-        transform: translateX(${props.translatesPoints[0]}px) rotate(0deg);
+        transform: translateX(${props.translatesPoints[0]}${
+    props.sizeUnit
+}) rotate(0deg);
         opacity: 0;
     }
     14.28% {
-        transform: translateX(${props.translatesPoints[1]}px) rotate(0deg);
+        transform: translateX(${props.translatesPoints[1]}${
+    props.sizeUnit
+}) rotate(0deg);
         opacity: 1;
     }
     28.56% {
-        transform: translateX(${props.translatesPoints[2]}px) rotate(0deg);
+        transform: translateX(${props.translatesPoints[2]}${
+    props.sizeUnit
+}) rotate(0deg);
         opacity: 1;
     }
     37.12% {
-        transform: translateX(${props.translatesPoints[3]}px) rotate(0deg);
+        transform: translateX(${props.translatesPoints[3]}${
+    props.sizeUnit
+}) rotate(0deg);
         opacity: 1;
     }
     42.84% {
-        transform: translateX(${props.translatesPoints[4]}px) rotate(10deg);
+        transform: translateX(${props.translatesPoints[4]}${
+    props.sizeUnit
+}) rotate(10deg);
         opacity: 1;
     }
     57.12% {
-        transform: translateX(${props.translatesPoints[5]}px) rotate(40deg);
+        transform: translateX(${props.translatesPoints[5]}${
+    props.sizeUnit
+}) rotate(40deg);
         opacity: 1;
     }
     71.4% {
-        transform: translateX(${props.translatesPoints[6]}px) rotate(62deg);
+        transform: translateX(${props.translatesPoints[6]}${
+    props.sizeUnit
+}) rotate(62deg);
         opacity: 1;
     }
     85.68% {
-        transform: translateX(${props.translatesPoints[7]}px) rotate(72deg);
+        transform: translateX(${props.translatesPoints[7]}${
+    props.sizeUnit
+}) rotate(72deg);
         opacity: 1;
     }
     100% {
-        transform: translateX(${props.translatesPoints[8]}px) rotate(74deg);
+        transform: translateX(${props.translatesPoints[8]}${
+    props.sizeUnit
+}) rotate(74deg);
         opacity: 0;
@@ -59,2 +77,3 @@ }
     size,
+    sizeUnit,
 }) => {
@@ -71,2 +90,3 @@ const bars = [];
                 index={i}
+                sizeUnit={sizeUnit}
             />,
@@ -78,3 +98,3 @@ );
 
-export const DominoSpinner = ({ size, color, loading }) => {
+export const DominoSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBars = 7;
@@ -85,3 +105,3 @@ const rotatesPoints = [0, 0, 0, 10, 40, 60, 70];
         loading && (
-            <Wrapper size={size}>
+            <Wrapper size={size} sizeUnit={sizeUnit}>
                 {getBars({
@@ -93,2 +113,3 @@ countBars,
                     size,
+                    sizeUnit,
                 })}
@@ -102,4 +123,4 @@ </Wrapper>
     position: relative;
-    width: ${props => props.size}px;
-    height: ${props => props.size / 5}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size / 5}${props.sizeUnit}`};
 `;
@@ -110,4 +131,4 @@
     right: 0;
-    width: ${props => props.size / 30}px;
-    height: ${props => props.size / 5}px;
+    width: ${props => `${props.size / 30}${props.sizeUnit}`};
+    height: ${props => `${props.size / 5}${props.sizeUnit}`};
     transform-origin: 50% 100%;
@@ -117,3 +138,5 @@ background-color: ${props => props.color};
     animation-delay: ${props => props.index * -0.42}s;
-    transform: translateX(${props => props.size - props.index * 15}px)
+    transform: translateX(
+            ${props => `${props.size - props.index * 15}${props.sizeUnit}`}
+        )
         rotate(${props => props.rotate}deg);
@@ -129,2 +152,3 @@ &:nth-child(1) {
     color: "#4b4c56",
+    sizeUnit: "px",
 };
@@ -136,2 +160,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/fill/index.js

@@ -41,7 +41,7 @@ import React from "react";
 
-export const FillSpinner = ({ size, color, loading }) => {
+export const FillSpinner = ({ size, color, loading, sizeUnit }) => {
     return (
         loading && (
-            <Wrapper size={size} color={color}>
-                <Plane color={color} size={size} />
+            <Wrapper size={size} color={color} sizeUnit={sizeUnit}>
+                <Plane color={color} size={size} sizeUnit={sizeUnit} />
             </Wrapper>
@@ -56,5 +56,6 @@ )
     justify-content: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
-    border: ${props => props.size / 8}px solid ${props => props.color};
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
+    border: ${props => `${props.size / 8}${props.sizeUnit}`} solid
+        ${props => props.color};
     animation: ${rotate} 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
@@ -73,2 +74,3 @@ `;
     color: "#4b4c56",
+    sizeUnit: "px",
 };
@@ -80,2 +82,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/firework/index.js

@@ -19,13 +19,14 @@ import React from "react";
 
-export const FireworkSpinner = ({ size, color, loading }) => {
-    return loading && <Wrapper size={size} color={color} />;
+export const FireworkSpinner = ({ size, color, loading, sizeUnit }) => {
+    return loading && <Wrapper size={size} color={color} sizeUnit={sizeUnit} />;
 };
 
 const Wrapper = styled.div`
-    border: ${props => props.size / 10}px dotted ${props => props.color};
+    border: ${props => `${props.size / 10}${props.sizeUnit}`} dotted
+        ${props => props.color};
     display: flex;
     justify-content: center;
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
     border-radius: 50%;
@@ -39,2 +40,3 @@ animation: ${fire} 1.25s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
     color: "#fff",
+    sizeUnit: "px",
 };
@@ -46,2 +48,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/flag/index.js

@@ -11,3 +11,3 @@ import React from "react";
     50% {
-        transform: translateY(${-props.size / 5}px);
+        transform: translateY(${-props.size / 5}${props.sizeUnit});
         opacity: 0.25;
@@ -21,3 +21,3 @@ }
 
-const getPlanes = ({ countPlaneInLine, color, size }) => {
+const getPlanes = ({ countPlaneInLine, color, size, sizeUnit }) => {
     const lines = [];
@@ -36,2 +36,3 @@ const planes = [];
                     index={keyValue}
+                    sizeUnit={sizeUnit}
                 />,
@@ -42,3 +43,8 @@ );
         lines.push(
-            <Line index={keyValue} key={keyValue.toString()} size={size}>
+            <Line
+                index={keyValue}
+                key={keyValue.toString()}
+                size={size}
+                sizeUnit={sizeUnit}
+            >
                 {[...planes]}
@@ -52,8 +58,8 @@ </Line>,
 
-export const FlagSpinner = ({ size, color, loading }) => {
+export const FlagSpinner = ({ size, color, loading, sizeUnit }) => {
     const countPlaneInLine = 4;
     return (
         loading && (
-            <Wrapper size={size}>
-                {getPlanes({ countPlaneInLine, color, size })}
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getPlanes({ countPlaneInLine, color, size, sizeUnit })}
             </Wrapper>
@@ -69,4 +75,4 @@ )
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
 `;
@@ -84,6 +90,6 @@
     position: absolute;
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
-    width: ${props => props.size / 6}px;
-    height: ${props => props.size / 6}px;
+    top: ${props => `${props.y}${props.sizeUnit}`};
+    left: ${props => `${props.x}${props.sizeUnit}`};
+    width: ${props => `${props.size / 6}${props.sizeUnit}`};
+    height: ${props => `${props.size / 6}${props.sizeUnit}`};
     background-color: ${props => props.color};
@@ -96,2 +102,3 @@ `;
     color: "#fff",
+    sizeUnit: "px",
 };
@@ -103,2 +110,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/flapper/index.js

@@ -8,8 +8,16 @@ import React from "react";
         opacity: 0;
-        transform: translateX(${props.x}px)
-        translateY(${props.y}px) scale(1);
+        transform: translateX(${props.x}${props.sizeUnit})
+        translateY(${props.y}${props.sizeUnit}) scale(1);
    }
 `;
 
-const getBalls = ({ countBalls, radius, angle, color, size, ballSize }) => {
+const getBalls = ({
+    countBalls,
+    radius,
+    angle,
+    color,
+    size,
+    ballSize,
+    sizeUnit,
+}) => {
     const balls = [];
@@ -29,2 +37,3 @@ const offset = ballSize / 2;
                 index={i}
+                sizeUnit={sizeUnit}
             />,
@@ -36,3 +45,3 @@ );
 
-export const FlapperSpinner = ({ size, color, loading }) => {
+export const FlapperSpinner = ({ size, color, loading, sizeUnit }) => {
     const radius = size / 2;
@@ -44,3 +53,3 @@ const countBalls = 7;
         loading && (
-            <Wrapper size={size}>
+            <Wrapper size={size} sizeUnit={sizeUnit}>
                 {getBalls({
@@ -53,2 +62,3 @@ countBalls,
                     ballSize,
+                    sizeUnit,
                 })}
@@ -65,4 +75,4 @@ </Wrapper>
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
 `;
@@ -72,10 +82,10 @@
     position: absolute;
-    top: ${props => props.size / 2}px;
-    left: ${props => props.size / 2}px;
-    width: ${props => props.ballSize}px;
-    height: ${props => props.ballSize}px;
+    top: ${props => `${props.size / 2}${props.sizeUnit}`};
+    left: ${props => `${props.size / 2}${props.sizeUnit}`};
+    width: ${props => `${props.ballSize}${props.sizeUnit}`};
+    height: ${props => `${props.ballSize}${props.sizeUnit}`};
     border-radius: 50%;
     background-color: ${props => props.color};
-    transform: translateX(${props => props.x}px)
-        translateY(${props => props.y}px) scale(0);
+    transform: translateX(${props => `${props.x}${props.sizeUnit}`})
+        translateY(${props => `${props.y}${props.sizeUnit}`}) scale(0);
     animation: ${props => move(props)} 0.8s linear infinite;
@@ -89,2 +99,3 @@ animation-delay: ${props => props.index * 0.1}s;
     color: "#00ff89",
+    sizeUnit: "px",
 };
@@ -96,2 +107,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/goo/index.js

@@ -19,3 +19,3 @@ import React from "react";
     50%{
-        transform: translateY(${props.translateTo}px) scale(0.8);
+        transform: translateY(${props.translateTo}${props.sizeUnit}) scale(0.8);
     }
@@ -27,3 +27,3 @@ 100%{
 
-const getBalls = ({ countBalls, color, size }) => {
+const getBalls = ({ countBalls, color, size, sizeUnit }) => {
     const balls = [];
@@ -42,2 +42,3 @@ const center = size / 4;
                 index={i}
+                sizeUnit={sizeUnit}
             />,
@@ -49,9 +50,9 @@ );
 
-export const GooSpinner = ({ size, color, loading }) => {
+export const GooSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBalls = 2;
     return (
         loading && (
-            <Wrapper size={size}>
-                <BallsWrapper size={size}>
-                    {getBalls({ countBalls, color, size })}
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                <BallsWrapper size={size} sizeUnit={sizeUnit}>
+                    {getBalls({ countBalls, color, size, sizeUnit })}
                 </BallsWrapper>
@@ -82,4 +83,4 @@ <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 const Wrapper = styled.div`
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
     filter: url("#goo");
@@ -90,4 +91,4 @@ `;
     position: relative;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
     animation: ${rotate} 1.7s linear infinite;
@@ -98,6 +99,6 @@ `;
     position: absolute;
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
-    width: ${props => props.size / 3}px;
-    height: ${props => props.size / 3}px;
+    top: ${props => `${props.y}${props.sizeUnit}`};
+    left: ${props => `${props.x}${props.sizeUnit}`};
+    width: ${props => `${props.size / 3}${props.sizeUnit}`};
+    height: ${props => `${props.size / 3}${props.sizeUnit}`};
     border-radius: 50%;
@@ -112,2 +113,3 @@ background-color: ${props => props.color};
     color: "#fff",
+    sizeUnit: "px",
 };
@@ -119,2 +121,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/grid/index.js

@@ -7,18 +7,18 @@ import React from "react";
     0% {
-        top: ${props.y}px;
-        left: ${props.x}px;
+        top: ${props.y}${props.sizeUnit};
+        left: ${props.x}${props.sizeUnit};
     }
     50% {
-        width: ${props.size / 4}px;
-        height: ${props.size / 4}px;
-        top: ${props.size / 2 - props.size / 8}px;
-        left: ${props.size / 2 - props.size / 8}px;
+        width: ${props.size / 4}${props.sizeUnit};
+        height: ${props.size / 4}${props.sizeUnit};
+        top: ${props.size / 2 - props.size / 8}${props.sizeUnit};
+        left: ${props.size / 2 - props.size / 8}${props.sizeUnit};
     }
     100% {
-        top: ${props.y}px;
-        left: ${props.x}px;
+        top: ${props.y}${props.sizeUnit};
+        left: ${props.x}${props.sizeUnit};
     }
 `;
 
-const getBalls = ({ countBallsInLine, color, size }) => {
+const getBalls = ({ countBallsInLine, color, size, sizeUnit }) => {
     const balls = [];
@@ -35,2 +35,3 @@ let keyValue = 0;
                     key={keyValue.toString()}
+                    sizeUnit={sizeUnit}
                 />,
@@ -44,8 +45,8 @@ );
 
-export const GridSpinner = ({ size, color, loading }) => {
+export const GridSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBallsInLine = 3;
     return (
         loading && (
-            <Wrapper size={size}>
-                {getBalls({ countBallsInLine, color, size })}
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getBalls({ countBallsInLine, color, size, sizeUnit })}
             </Wrapper>
@@ -61,4 +62,4 @@ )
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
 `;
@@ -68,6 +69,6 @@
     position: absolute;
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
-    width: ${props => props.size / 6}px;
-    height: ${props => props.size / 6}px;
+    top: ${props => `${props.y}${props.sizeUnit}`};
+    left: ${props => `${props.x}${props.sizeUnit}`};
+    width: ${props => `${props.size / 6}${props.sizeUnit}`};
+    height: ${props => `${props.size / 6}${props.sizeUnit}`};
     border-radius: 50%;
@@ -82,2 +83,3 @@ background-color: ${props => props.color};
     color: "#fff",
+    sizeUnit: "px",
 };
@@ -89,2 +91,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/guard/index.js

@@ -17,3 +17,9 @@ import React from "react";
 
-const getCubes = ({ countCubesInLine, backColor, frontColor, size }) => {
+const getCubes = ({
+    countCubesInLine,
+    backColor,
+    frontColor,
+    size,
+    sizeUnit,
+}) => {
     const cubes = [];
@@ -29,6 +35,17 @@ let keyValue = 0;
                     key={keyValue.toString()}
+                    sizeUnit={sizeUnit}
                 >
-                    <Cube size={size} index={keyValue}>
-                        <Side front={true} size={size} color={frontColor} />
-                        <Side left={true} size={size} color={backColor} />
+                    <Cube size={size} index={keyValue} sizeUnit={sizeUnit}>
+                        <Side
+                            front={true}
+                            size={size}
+                            color={frontColor}
+                            sizeUnit={sizeUnit}
+                        />
+                        <Side
+                            left={true}
+                            size={size}
+                            color={backColor}
+                            sizeUnit={sizeUnit}
+                        />
                     </Cube>
@@ -43,8 +60,20 @@ </CubeWrapper>,
 
-export const GuardSpinner = ({ size, backColor, frontColor, loading }) => {
+export const GuardSpinner = ({
+    size,
+    backColor,
+    frontColor,
+    loading,
+    sizeUnit,
+}) => {
     const countCubesInLine = 3;
     return (
         loading && (
-            <Wrapper size={size}>
-                {getCubes({ countCubesInLine, backColor, frontColor, size })}
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getCubes({
+                    countCubesInLine,
+                    backColor,
+                    frontColor,
+                    size,
+                    sizeUnit,
+                })}
             </Wrapper>
@@ -60,5 +89,5 @@ )
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
-    perspective: ${props => props.size * 3}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
+    perspective: ${props => `${props.size * 3}${props.sizeUnit}`};
 `;
@@ -68,6 +97,6 @@
     position: absolute;
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    top: ${props => `${props.y}${props.sizeUnit}`};
+    left: ${props => `${props.x}${props.sizeUnit}`};
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
 `;
@@ -77,4 +106,4 @@
     position: relative;
-    width: ${props => props.size / 4}px;
-    height: ${props => props.size / 4}px;
+    width: ${props => `${props.size / 4}${props.sizeUnit}`};
+    height: ${props => `${props.size / 4}${props.sizeUnit}`};
     transform-style: preserve-3d;
@@ -92,3 +121,3 @@ animation: ${rotate} 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;
     transform: rotateY(${props => (props.front ? 0 : -90)}deg)
-        translateZ(${props => props.size / 8}px);
+        translateZ(${props => `${props.size / 8}${props.sizeUnit}`});
 `;
@@ -101,2 +130,3 @@
     backColor: "#373846",
+    sizeUnit: "px",
 };
@@ -109,2 +139,3 @@
     backColor: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/heart/index.js

@@ -26,4 +26,4 @@ import React from "react";
 
-export const HeartSpinner = ({ size, color, loading }) => {
-    return loading && <Wrapper size={size} color={color} />;
+export const HeartSpinner = ({ size, color, loading, sizeUnit }) => {
+    return loading && <Wrapper size={size} color={color} sizeUnit={sizeUnit} />;
 };
@@ -33,4 +33,4 @@
     position: relative;
-    width: ${props => props.size}px;
-    height: ${props => props.size - props.size / 10}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size - props.size / 10}${props.sizeUnit}`};
     animation: ${resize} 1s ease-in-out infinite;
@@ -41,9 +41,9 @@ &::before,
         position: absolute;
-        top: ${props => props.size / 20}px;
-        left: ${props => props.size / 2}px;
-        width: ${props => props.size / 2}px;
-        height: ${props => props.size - props.size / 5}px;
+        top: ${props => `${props.size / 20}${props.sizeUnit}`};
+        left: ${props => `${props.size / 2}${props.sizeUnit}`};
+        width: ${props => `${props.size / 2}${props.sizeUnit}`};
+        height: ${props => `${props.size - props.size / 5}${props.sizeUnit}`};
         background-color: ${props => props.color};
-        border-radius: ${props => props.size / 2}px ${props => props.size / 2}px
-            0 0;
+        border-radius: ${props => `${props.size / 2}${props.sizeUnit}`}
+            ${props => `${props.size / 2}${props.sizeUnit}`} 0 0;
         transform: rotate(-45deg);
@@ -63,2 +63,3 @@ transform-origin: 0 100%;
     color: "#fff",
+    sizeUnit: "px",
 };
@@ -70,2 +71,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/hoop/index.js

@@ -10,3 +10,3 @@ import React from "react";
         transform: ${`rotateX(65deg) rotateY(45deg) translateZ(-${props.size *
-            1.5}px) scale(0.1)`};
+            1.5}${props.sizeUnit}) scale(0.1)`};
     }
@@ -20,7 +20,7 @@ 40% {
         transform: ${`rotateX(65deg) rotateY(-45deg) translateZ(-${props.size *
-            1.5}px) scale(0.1)`};
+            1.5}${props.sizeUnit}) scale(0.1)`};
     }
 `;
 
-const getBalls = ({ countBallsInLine, color, size }) => {
+const getBalls = ({ countBallsInLine, color, size, sizeUnit }) => {
     const balls = [];
@@ -35,2 +35,3 @@ let keyValue = 0;
                 index={i}
+                sizeUnit={sizeUnit}
             />,
@@ -43,8 +44,8 @@ );
 
-export const HoopSpinner = ({ size, color, loading }) => {
+export const HoopSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBallsInLine = 6;
     return (
         loading && (
-            <Wrapper size={size}>
-                {getBalls({ countBallsInLine, color, size })}
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getBalls({ countBallsInLine, color, size, sizeUnit })}
             </Wrapper>
@@ -60,4 +61,4 @@ )
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
     perspective: 600px;
@@ -69,5 +70,6 @@ transform-style: perserve-3d;
     position: absolute;
-    width: ${props => props.size / 1.5}px;
-    height: ${props => props.size / 1.5}px;
-    border: ${props => props.size / 5}px solid ${props => props.color};
+    width: ${props => `${props.size / 1.5}${props.sizeUnit}`};
+    height: ${props => `${props.size / 1.5}${props.sizeUnit}`};
+    border: ${props => `${props.size / 5}${props.sizeUnit}`} solid
+        ${props => props.color};
     border-radius: 50%;
@@ -86,2 +88,3 @@ background-color: transparent;
     color: "#4b4c56",
+    sizeUnit: "px",
 };
@@ -93,2 +96,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/impulse/index.js

@@ -27,3 +27,3 @@ import React from "react";
 
-const getBalls = ({ countBalls, frontColor, backColor, size }) => {
+const getBalls = ({ countBalls, frontColor, backColor, size, sizeUnit }) => {
     const balls = [];
@@ -40,2 +40,3 @@ for (let i = 0; i < countBalls; i++) {
                 index={i}
+                sizeUnit={sizeUnit}
             />,
@@ -47,8 +48,20 @@ );
 
-export const ImpulseSpinner = ({ size, frontColor, backColor, loading }) => {
+export const ImpulseSpinner = ({
+    size,
+    frontColor,
+    backColor,
+    loading,
+    sizeUnit,
+}) => {
     const countBalls = 3;
     return (
         loading && (
-            <Wrapper size={size}>
-                {getBalls({ countBalls, frontColor, backColor, size })}
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getBalls({
+                    countBalls,
+                    frontColor,
+                    backColor,
+                    size,
+                    sizeUnit,
+                })}
             </Wrapper>
@@ -64,4 +77,4 @@ )
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size / 5}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size / 5}${props.sizeUnit}`};
 `;
@@ -71,6 +84,6 @@
     position: absolute;
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
-    width: ${props => props.size / 5}px;
-    height: ${props => props.size / 5}px;
+    top: ${props => `${props.y}${props.sizeUnit}`};
+    left: ${props => `${props.x}${props.sizeUnit}`};
+    width: ${props => `${props.size / 5}${props.sizeUnit}`};
+    height: ${props => `${props.size / 5}${props.sizeUnit}`};
     border-radius: 50%;
@@ -87,2 +100,3 @@ background-color: ${props => props.frontColor};
     backColor: "#4b4c56",
+    sizeUnit: "px",
 };
@@ -95,2 +109,3 @@
     backColor: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/jellyfish/index.js

@@ -7,13 +7,13 @@ import React from "react";
     0% {
-        transform: ${`translateY(${-props.size / 5}px);`};
+        transform: ${`translateY(${-props.size / 5}${props.sizeUnit});`};
     }
     50% {
-        transform: ${`translateY(${props.size / 4}px)`};
+        transform: ${`translateY(${props.size / 4}${props.sizeUnit})`};
     }
     100% {
-        transform: ${`translateY(${-props.size / 5}px)`};
+        transform: ${`translateY(${-props.size / 5}${props.sizeUnit})`};
     }
 `;
 
-const getRings = ({ countBalls: countRings, color, size }) => {
+const getRings = ({ countBalls: countRings, color, size, sizeUnit }) => {
     const rings = [];
@@ -29,2 +29,3 @@ let keyValue = 0;
                 index={i}
+                sizeUnit={sizeUnit}
             />,
@@ -37,8 +38,8 @@ );
 
-export const JellyfishSpinner = ({ size, color, loading }) => {
+export const JellyfishSpinner = ({ size, color, loading, sizeUnit }) => {
     const countRings = 6;
     return (
         loading && (
-            <Wrapper size={size}>
-                {getRings({ countBalls: countRings, color, size })}
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getRings({ countBalls: countRings, color, size, sizeUnit })}
             </Wrapper>
@@ -54,4 +55,4 @@ )
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
 `;
@@ -61,4 +62,8 @@
     position: absolute;
-    width: ${props => props.index * (props.size / props.countRings)}px;
-    height: ${props => (props.index * (props.size / props.countRings)) / 2}px;
+    width: ${props =>
+        `${props.index * (props.size / props.countRings)}${props.sizeUnit}`};
+    height: ${props =>
+        `${(props.index * (props.size / props.countRings)) / 2}${
+            props.sizeUnit
+        }`};
     border: 2px solid ${props => props.color};
@@ -75,2 +80,3 @@ border-radius: 50%;
     color: "#4b4c56",
+    sizeUnit: "px",
 };
@@ -82,2 +88,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/magic/index.js

@@ -11,3 +11,3 @@ import React from "react";
 
-const getBalls = ({ countBalls, color, size }) => {
+const getBalls = ({ countBalls, color, size, sizeUnit }) => {
     const balls = [];
@@ -22,2 +22,3 @@ for (let i = 0; i < countBalls; i++) {
                 index={i}
+                sizeUnit={sizeUnit}
             />,
@@ -29,7 +30,7 @@ );
 
-export const MagicSpinner = ({ size, color, loading }) => {
+export const MagicSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBalls = size / 12;
     return (
         loading && (
-            <Wrapper size={size}>
+            <Wrapper size={size} sizeUnit={sizeUnit}>
                 {getBalls({
@@ -39,2 +40,3 @@ countBalls,
                     size,
+                    sizeUnit,
                 })}
@@ -51,4 +53,4 @@ </Wrapper>
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
     overflow: hidden;
@@ -62,4 +64,6 @@ `;
     transform: translateX(-50%) translateY(-50%) rotate(0deg);
-    width: ${props => props.index * (props.size / props.countBalls)}px;
-    height: ${props => props.index * (props.size / props.countBalls)}px;
+    width: ${props =>
+        `${props.index * (props.size / props.countBalls)}${props.sizeUnit}`};
+    height: ${props =>
+        `${props.index * (props.size / props.countBalls)}${props.sizeUnit}`};
     border-radius: 50%;
@@ -78,2 +82,3 @@ background-color: transparent;
     color: "#fff",
+    sizeUnit: "px",
 };
@@ -85,2 +90,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/pong/index.js

@@ -7,9 +7,9 @@ import React from "react";
     0% {
-        top: ${props.left ? 0 : props.size / 3.5}px;
+        top: ${props.left ? 0 : props.size / 3.5}${props.sizeUnit};
     }
     50% {
-        top: ${props.left ? props.size / 3.5 : 0}px;
+        top: ${props.left ? props.size / 3.5 : 0}${props.sizeUnit};
     }
     100% {
-        top: ${props.left ? 0 : props.size / 3.5}px;
+        top: ${props.left ? 0 : props.size / 3.5}${props.sizeUnit};
     }
@@ -20,30 +20,40 @@ `;
     0% {
-        top: ${props.size / 3.5 - props.size / 8}px;
-        left: ${props.size / 12}px;
+        top: ${props.size / 3.5 - props.size / 8}${props.sizeUnit};
+        left: ${props.size / 12}${props.sizeUnit};
     }
     25% {
-        top: ${props.size / 3.5}px;
-        left: ${props.size - props.size / 8}px; 
+        top: ${props.size / 3.5}${props.sizeUnit};
+        left: ${props.size - props.size / 8}${props.sizeUnit}; 
     }
     50% {
-        top: ${props.size / 1.75 - props.size / 8}px;
-        left: ${props.size / 12}px; 
+        top: ${props.size / 1.75 - props.size / 8}${props.sizeUnit};
+        left: ${props.size / 12}${props.sizeUnit}; 
     }
     75% {
-        top: ${props.size / 3.5}px;
-        left: ${props.size - props.size / 8}px;
+        top: ${props.size / 3.5}${props.sizeUnit};
+        left: ${props.size - props.size / 8}${props.sizeUnit};
     }
     100% {
-        top: ${props.size / 3.5 - props.size / 8}px;
-        left: ${props.size / 12}px; 
+        top: ${props.size / 3.5 - props.size / 8}${props.sizeUnit};
+        left: ${props.size / 12}${props.sizeUnit}; 
     }
 `;
 
-export const PongSpinner = ({ size, color, loading }) => {
+export const PongSpinner = ({ size, color, loading, sizeUnit }) => {
     return (
         loading && (
-            <Wrapper size={size}>
-                <Player left={true} color={color} size={size} />
-                <Ball color={color} size={size} />
-                <Player right={true} color={color} size={size} />
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                <Player
+                    left={true}
+                    color={color}
+                    size={size}
+                    sizeUnit={sizeUnit}
+                />
+                <Ball color={color} size={size} sizeUnit={sizeUnit} />
+                <Player
+                    right={true}
+                    color={color}
+                    size={size}
+                    sizeUnit={sizeUnit}
+                />
             </Wrapper>
@@ -56,4 +66,4 @@ )
     position: relative;
-    width: ${props => props.size}px;
-    height: ${props => props.size / 1.75}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size / 1.75}${props.sizeUnit}`};
 `;
@@ -63,4 +73,4 @@
     position: absolute;
-    width: ${props => props.size / 8}px;
-    height: ${props => props.size / 8}px;
+    width: ${props => `${props.size / 8}${props.sizeUnit}`};
+    height: ${props => `${props.size / 8}${props.sizeUnit}`};
     border-radius: 50%;
@@ -73,4 +83,4 @@ background-color: ${props => props.color};
     position: absolute;
-    width: ${props => props.size / 12}px;
-    height: ${props => props.size / 3}px;
+    width: ${props => `${props.size / 12}${props.sizeUnit}`};
+    height: ${props => `${props.size / 3}${props.sizeUnit}`};
     background-color: ${props => props.color};
@@ -87,2 +97,3 @@ left: ${props => (props.left ? 0 : props.size)};
     color: "#4b4c56",
+    sizeUnit: "px",
 };
@@ -94,2 +105,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/pulse/index.js

@@ -17,3 +17,3 @@ import React from "react";
 
-const getCubes = ({ countCubeInLine, color, size }) => {
+const getCubes = ({ countCubeInLine, color, size, sizeUnit }) => {
     const cubes = [];
@@ -30,2 +30,3 @@ let keyValue = 0;
                 index={i}
+                sizeUnit={sizeUnit}
             />,
@@ -38,8 +39,8 @@ );
 
-export const PulseSpinner = ({ size, color, loading }) => {
+export const PulseSpinner = ({ size, color, loading, sizeUnit }) => {
     const countCubeInLine = 3;
     return (
         loading && (
-            <Wrapper size={size}>
-                {getCubes({ countCubeInLine, color, size })}
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getCubes({ countCubeInLine, color, size, sizeUnit })}
             </Wrapper>
@@ -55,4 +56,4 @@ )
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size / 2.5}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size / 2.5}${props.sizeUnit}`};
 `;
@@ -62,6 +63,6 @@
     position: absolute;
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
-    width: ${props => props.size / 5}px;
-    height: ${props => props.size / 2.5}px;
+    top: ${props => `${props.y}${props.sizeUnit}`};
+    left: ${props => `${props.x}${props.sizeUnit}`};
+    width: ${props => `${props.size / 5}${props.sizeUnit}`};
+    height: ${props => `${props.size / 2.5}${props.sizeUnit}`};
     background-color: ${props => props.color};
@@ -76,2 +77,3 @@ animation: ${motion} 1.5s cubic-bezier(0.895, 0.03, 0.685, 0.22) infinite;
     color: "#fff",
+    sizeUnit: "px",
 };
@@ -83,2 +85,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/push/index.js

@@ -5,15 +5,15 @@ import React from "react";
 
-const motion = keyframes`
+const motion = props => keyframes`
     15% {
-        transform: scaleY(1) translateX(10px);
+        transform: scaleY(1) translateX(10${props.sizeUnit});
     }
     90% {
-        transform: scaleY(0.05) translateX(-5px);
+        transform: scaleY(0.05) translateX(-5${props.sizeUnit});
     }
     100%{
-        transform: scaleY(0.05) translateX(-5px);
+        transform: scaleY(0.05) translateX(-5${props.sizeUnit});
     }
 `;
 
-const getBars = ({ countBars, color, size }) => {
+const getBars = ({ countBars, color, size, sizeUnit }) => {
     const bars = [];
@@ -29,2 +29,3 @@ for (let i = 0; i < countBars; i++) {
                 index={i}
+                sizeUnit={sizeUnit}
             />,
@@ -36,7 +37,9 @@ );
 
-export const PushSpinner = ({ size, color, loading }) => {
+export const PushSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBars = 10;
     return (
         loading && (
-            <Wrapper size={size}>{getBars({ countBars, color, size })}</Wrapper>
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getBars({ countBars, color, size, sizeUnit })}
+            </Wrapper>
         )
@@ -51,4 +54,4 @@ );
     align-items: center;
-    width: ${props => props.size * 2.5}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size * 2.5}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
     overflow: hidden;
@@ -60,4 +63,4 @@ `;
     top: 0;
-    left: ${props => props.x}px;
-    width: ${props => props.size / 5}px;
+    left: ${props => `${props.x}${props.sizeUnit}`};
+    width: ${props => `${props.size / 5}${props.sizeUnit}`};
     height: 100%;
@@ -74,2 +77,3 @@ transform: scaleY(0.05) translateX(-5px);
     color: "#4b4c56",
+    sizeUnit: "px",
 };
@@ -81,2 +85,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/rainbow/index.js

@@ -5,25 +5,25 @@ import React from "react";
 
-const rotate = () => keyframes`
+const rotate = props => keyframes`
     0% {
-        border-width: 10px; 
+        border-width: 10${props.sizeUnit}; 
     }
     25% {
-        border-width: 3px; 
+        border-width: 3${props.sizeUnit}; 
     }
     50% {
         transform: rotate(115deg); 
-        border-width: 10px;
+        border-width: 10${props.sizeUnit};
     }
     75% {
-        border-width: 3px;
+        border-width: 3${props.sizeUnit};
     }
     100% {
-        border-width: 10px;
+        border-width: 10${props.sizeUnit};
     }
 `;
-export const RainbowSpinner = ({ size, color, loading }) => {
+export const RainbowSpinner = ({ size, color, loading, sizeUnit }) => {
     return (
         loading && (
-            <Wrapper size={size}>
-                <Line size={size} color={color} />
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                <Line size={size} color={color} sizeUnit={sizeUnit} />
             </Wrapper>
@@ -35,4 +35,4 @@ )
 const Wrapper = styled.div`
-    width: ${props => props.size}px;
-    height: ${props => props.size / 2}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size / 2}${props.sizeUnit}`};
     overflow: hidden;
@@ -42,4 +42,4 @@ `;
 const Line = styled.div`
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
     border-radius: 50%;
@@ -60,2 +60,3 @@ border-style: solid;
     color: "#fff",
+    sizeUnit: "px",
 };
@@ -67,2 +68,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/ring/index.js

@@ -7,3 +7,5 @@ import React from "react";
     0% { 
-        box-shadow: inset 0 0 0 ${props.size / 10}px ${props.color};
+        box-shadow: inset 0 0 0 ${props.size / 10}${props.sizeUnit} ${
+    props.color
+};
         opacity: 1;
@@ -23,3 +25,5 @@ }
     100% { 
-        box-shadow: inset 0 0 0 ${props.size / 10}px ${props.color};
+        box-shadow: inset 0 0 0 ${props.size / 10}${props.sizeUnit} ${
+    props.color
+};
         opacity: 1;
@@ -29,7 +33,7 @@ }
 
-export const RingSpinner = ({ size, color, loading }) => {
+export const RingSpinner = ({ size, color, loading, sizeUnit }) => {
     return (
         loading && (
-            <Wrapper size={size}>
-                <Circle size={size} color={color} />
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                <Circle size={size} color={color} sizeUnit={sizeUnit} />
             </Wrapper>
@@ -41,4 +45,4 @@ )
 const Wrapper = styled.div`
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
 `;
@@ -54,4 +58,2 @@
     height: 100%;
-    margin-top: ${props => props.size / 2};
-    margin-bottom: ${props => props.size / 2};
     &:before,
@@ -70,3 +72,3 @@ &:after {
         box-shadow: ${props =>
-            `inset 0 0 0 ${props.size / 10}px ${props.color}`};
+            `inset 0 0 0 ${props.size / 10}${props.sizeUnit} ${props.color}`};
         animation-name: ${firstPulse};
@@ -84,2 +86,3 @@ }
     color: "#00ff89",
+    sizeUnit: "px",
 };
@@ -91,2 +94,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/rotate/index.js

@@ -15,3 +15,11 @@ import React from "react";
 
-const getBalls = ({ countBalls, radius, angle, color, size, ballSize }) => {
+const getBalls = ({
+    countBalls,
+    radius,
+    angle,
+    color,
+    size,
+    ballSize,
+    sizeUnit,
+}) => {
     const balls = [];
@@ -31,2 +39,3 @@ const offset = ballSize / 2;
                 index={i}
+                sizeUnit={sizeUnit}
             />,
@@ -38,3 +47,3 @@ );
 
-export const RotateSpinner = ({ size, color, loading }) => {
+export const RotateSpinner = ({ size, color, loading, sizeUnit }) => {
     const radius = size / 2;
@@ -46,3 +55,3 @@ const countBalls = 8;
         loading && (
-            <Wrapper size={size}>
+            <Wrapper size={size} sizeUnit={sizeUnit}>
                 {getBalls({
@@ -55,2 +64,3 @@ countBalls,
                     ballSize,
+                    sizeUnit,
                 })}
@@ -67,4 +77,4 @@ </Wrapper>
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
 `;
@@ -76,4 +86,4 @@
     top: 0%;
-    width: ${props => props.ballSize}px;
-    height: ${props => props.ballSize}px;
+    width: ${props => `${props.ballSize}${props.sizeUnit}`};
+    height: ${props => `${props.ballSize}${props.sizeUnit}`};
     border-radius: 50%;
@@ -96,2 +106,3 @@ background-color: ${props => props.color};
     color: "#00ff89",
+    sizeUnit: "px",
 };
@@ -103,2 +114,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/sequence/index.js

@@ -7,3 +7,3 @@ import React from "react";
     0% {
-        top: ${props.size}px;
+        top: ${props.size}${props.sizeUnit};
         transform: rotateY(0deg);
@@ -17,7 +17,13 @@ }
         transform: rotateY(0deg);
-        top: -${props.size}px;
+        top: -${props.size}${props.sizeUnit};
     }
 `;
 
-const getCubes = ({ countCubesInLine, backColor, frontColor, size }) => {
+const getCubes = ({
+    countCubesInLine,
+    backColor,
+    frontColor,
+    size,
+    sizeUnit,
+}) => {
     const cubes = [];
@@ -31,6 +37,17 @@ let keyValue = 0;
                 key={keyValue.toString()}
+                sizeUnit={sizeUnit}
             >
-                <Cube size={size} index={keyValue}>
-                    <Side front={true} size={size} color={frontColor} />
-                    <Side left={true} size={size} color={backColor} />
+                <Cube size={size} index={keyValue} sizeUnit={sizeUnit}>
+                    <Side
+                        front={true}
+                        size={size}
+                        color={frontColor}
+                        sizeUnit={sizeUnit}
+                    />
+                    <Side
+                        left={true}
+                        size={size}
+                        color={backColor}
+                        sizeUnit={sizeUnit}
+                    />
                 </Cube>
@@ -44,8 +61,20 @@ </CubeWrapper>,
 
-export const SequenceSpinner = ({ size, backColor, frontColor, loading }) => {
+export const SequenceSpinner = ({
+    size,
+    backColor,
+    frontColor,
+    loading,
+    sizeUnit,
+}) => {
     const countCubesInLine = 5;
     return (
         loading && (
-            <Wrapper size={size}>
-                {getCubes({ countCubesInLine, backColor, frontColor, size })}
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getCubes({
+                    countCubesInLine,
+                    backColor,
+                    frontColor,
+                    size,
+                    sizeUnit,
+                })}
             </Wrapper>
@@ -61,5 +90,5 @@ )
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size / 1.75}px;
-    perspective: ${props => props.size * 3}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size / 1.75}${props.sizeUnit}`};
+    perspective: ${props => `${props.size * 3}${props.sizeUnit}`};
     overflow: hidden;
@@ -71,4 +100,4 @@ transform: rotateY(20deg);
     position: absolute;
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
+    top: ${props => `${props.y}${props.sizeUnit}`};
+    left: ${props => `${props.x}${props.sizeUnit}`};
     width: inherit;
@@ -80,4 +109,4 @@ height: inherit;
     position: relative;
-    width: ${props => props.size / 8}px;
-    height: ${props => props.size / 1.75}px;
+    width: ${props => `${props.size / 8}${props.sizeUnit}`};
+    height: ${props => `${props.size / 1.75}${props.sizeUnit}`};
     transform-style: preserve-3d;
@@ -96,3 +125,3 @@ animation: ${rotate} 1.75s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
     transform: rotateY(${props => (props.front ? 0 : -90)}deg)
-        translateZ(${props => props.size / 16}px);
+        translateZ(${props => `${props.size / 16}${props.sizeUnit}`});
 `;
@@ -105,2 +134,3 @@
     backColor: "#00ff89",
+    sizeUnit: "px",
 };
@@ -113,2 +143,3 @@
     backColor: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/sphere/index.js

@@ -13,18 +13,32 @@ import React from "react";
     0% {
-        transform: translateX(${props.x}px) translateY(${props.y}px) scale(1) ;
+        transform: translateX(${props.x}${props.sizeUnit}) translateY(${
+    props.y
+}${props.sizeUnit}) scale(1) ;
     }
     5% {
-        transform: translateX(-${props.size / 12}px) translateY(-${props.size /
-    12}px) scale(0);
+        transform: translateX(-${props.size / 12}${
+    props.sizeUnit
+}) translateY(-${props.size / 12}${props.sizeUnit}) scale(0);
     }
     50% {
-        transform: translateX(-${props.size / 12}px) translateY(-${props.size /
-    12}px) scale(0);
+        transform: translateX(-${props.size / 12}${
+    props.sizeUnit
+}) translateY(-${props.size / 12}${props.sizeUnit}) scale(0);
     }
     55% {
-        transform: translateX(${props.x}px) translateY(${props.y}px) scale(1) ;
+        transform: translateX(${props.x}${props.sizeUnit}) translateY(${
+    props.y
+}${props.sizeUnit}) scale(1) ;
     }
 `;
 
-const getBalls = ({ countBalls, radius, angle, color, size, ballSize }) => {
+const getBalls = ({
+    countBalls,
+    radius,
+    angle,
+    color,
+    size,
+    ballSize,
+    sizeUnit,
+}) => {
     const balls = [];
@@ -44,2 +58,3 @@ const offset = ballSize / 2;
                 index={i}
+                sizeUnit={sizeUnit}
             />,
@@ -51,3 +66,3 @@ );
 
-export const SphereSpinner = ({ size, color, loading }) => {
+export const SphereSpinner = ({ size, color, loading, sizeUnit }) => {
     const radius = size / 2;
@@ -59,4 +74,12 @@ const countBalls = 7;
         loading && (
-            <Wrapper size={size}>
-                {getBalls({ countBalls, radius, angle, color, size, ballSize })}
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getBalls({
+                    countBalls,
+                    radius,
+                    angle,
+                    color,
+                    size,
+                    ballSize,
+                    sizeUnit,
+                })}
             </Wrapper>
@@ -72,4 +95,4 @@ )
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
     animation: ${rotate} 8s linear infinite;
@@ -80,10 +103,10 @@ `;
     position: absolute;
-    top: ${props => props.size / 2}px;
-    left: ${props => props.size / 2}px;
-    width: ${props => props.ballSize}px;
-    height: ${props => props.ballSize}px;
+    top: ${props => `${props.size / 2}${props.sizeUnit}`};
+    left: ${props => `${props.size / 2}${props.sizeUnit}`};
+    width: ${props => `${props.ballSize}${props.sizeUnit}`};
+    height: ${props => `${props.ballSize}${props.sizeUnit}`};
     border-radius: 50%;
     background-color: ${props => props.color};
-    transform: translateX(${props => props.x}px)
-        translateY(${props => props.y}px);
+    transform: translateX(${props => `${props.x}${props.sizeUnit}`})
+        translateY(${props => `${props.y}${props.sizeUnit}`});
     animation: ${props => move(props)} 5s cubic-bezier(0.165, 0.84, 0.44, 1)
@@ -98,2 +121,3 @@ infinite;
     color: "#fff",
+    sizeUnit: "px",
 };
@@ -105,2 +129,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/spiral/index.js

@@ -23,3 +23,9 @@ import React from "react";
 
-const getCubes = ({ countCubesInLine, backColor, frontColor, size }) => {
+const getCubes = ({
+    countCubesInLine,
+    backColor,
+    frontColor,
+    size,
+    sizeUnit,
+}) => {
     const cubes = [];
@@ -29,8 +35,33 @@ let keyValue = 0;
         cubes.push(
-            <CubeWrapper x={i * (size / 4)} y={0} key={keyValue.toString()}>
-                <Cube size={size} index={keyValue}>
-                    <Side front={true} size={size} color={frontColor} />
-                    <Side back={true} size={size} color={frontColor} />
-                    <Side bottom={true} size={size} color={backColor} />
-                    <Side top={true} size={size} color={backColor} />
+            <CubeWrapper
+                x={i * (size / 4)}
+                y={0}
+                key={keyValue.toString()}
+                sizeUnit={sizeUnit}
+            >
+                <Cube size={size} index={keyValue} sizeUnit={sizeUnit}>
+                    <Side
+                        front={true}
+                        size={size}
+                        color={frontColor}
+                        sizeUnit={sizeUnit}
+                    />
+                    <Side
+                        back={true}
+                        size={size}
+                        color={frontColor}
+                        sizeUnit={sizeUnit}
+                    />
+                    <Side
+                        bottom={true}
+                        size={size}
+                        color={backColor}
+                        sizeUnit={sizeUnit}
+                    />
+                    <Side
+                        top={true}
+                        size={size}
+                        color={backColor}
+                        sizeUnit={sizeUnit}
+                    />
                 </Cube>
@@ -44,8 +75,20 @@ </CubeWrapper>,
 
-export const SpiralSpinner = ({ size, backColor, frontColor, loading }) => {
+export const SpiralSpinner = ({
+    size,
+    backColor,
+    frontColor,
+    loading,
+    sizeUnit,
+}) => {
     const countCubesInLine = 4;
     return (
         loading && (
-            <Wrapper size={size}>
-                {getCubes({ countCubesInLine, backColor, frontColor, size })}
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getCubes({
+                    countCubesInLine,
+                    backColor,
+                    frontColor,
+                    size,
+                    sizeUnit,
+                })}
             </Wrapper>
@@ -61,5 +104,5 @@ )
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size / 4}px;
-    perspective: ${props => props.size * 3}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size / 4}${props.sizeUnit}`};
+    perspective: ${props => `${props.size * 3}${props.sizeUnit}`};
 `;
@@ -69,4 +112,4 @@
     position: absolute;
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
+    top: ${props => `${props.y}${props.sizeUnit}`};
+    left: ${props => `${props.x}${props.sizeUnit}`};
     width: inherit;
@@ -78,4 +121,4 @@ height: inherit;
     position: relative;
-    width: ${props => props.size / 4}px;
-    height: ${props => props.size / 4}px;
+    width: ${props => `${props.size / 4}${props.sizeUnit}`};
+    height: ${props => `${props.size / 4}${props.sizeUnit}`};
     transform-style: preserve-3d;
@@ -105,3 +148,3 @@ animation: ${rotate} 3s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
         rotateY(${props => (props.back ? 180 : 0)}deg)
-        translateZ(${props => props.size / 8}px);
+        translateZ(${props => `${props.size / 8}${props.sizeUnit}`});
 `;
@@ -114,2 +157,3 @@
     backColor: "#4b4c56",
+    sizeUnit: "px",
 };
@@ -122,2 +166,3 @@
     backColor: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/stage/index.js

@@ -7,18 +7,18 @@ import React from "react";
     0% {
-        top: ${props.y}px;
-        left: ${props.x}px;
+        top: ${props.y}${props.sizeUnit};
+        left: ${props.x}${props.sizeUnit};
     }
     25% {
-        top: ${props.y}px;
-        left: ${props.x}px;
+        top: ${props.y}${props.sizeUnit};
+        left: ${props.x}${props.sizeUnit};
         opacity: 0;
     }
     50% {
-        top: ${props.y + props.size / 2}px;
-        left: ${props.x}px;
+        top: ${props.y + props.size / 2}${props.sizeUnit};
+        left: ${props.x}${props.sizeUnit};
         opacity: 0;
     }
     100% {
-        top: ${props.y}px;
-        left: ${props.x}px;
+        top: ${props.y}${props.sizeUnit};
+        left: ${props.x}${props.sizeUnit};
         opacity: 1;
@@ -28,3 +28,3 @@ }
 
-const getBalls = ({ countBalls, color, size }) => {
+const getBalls = ({ countBalls, color, size, sizeUnit }) => {
     const balls = [];
@@ -41,2 +41,3 @@ let keyValue = 0;
                 key={keyValue.toString()}
+                sizeUnit={sizeUnit}
             />,
@@ -49,8 +50,8 @@ );
 
-export const StageSpinner = ({ size, color, loading }) => {
+export const StageSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBalls = 3;
     return (
         loading && (
-            <Wrapper size={size}>
-                {getBalls({ countBalls, color, size })}
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getBalls({ countBalls, color, size, sizeUnit })}
             </Wrapper>
@@ -66,4 +67,4 @@ )
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
 `;
@@ -73,6 +74,6 @@
     position: absolute;
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
-    width: ${props => props.size / 5}px;
-    height: ${props => props.size / 5}px;
+    top: ${props => `${props.y}${props.sizeUnit}`};
+    left: ${props => `${props.x}${props.sizeUnit}`};
+    width: ${props => `${props.size / 5}${props.sizeUnit}`};
+    height: ${props => `${props.size / 5}${props.sizeUnit}`};
     border-radius: 50%;
@@ -88,2 +89,3 @@ background-color: ${props => props.color};
     color: "#fff",
+    sizeUnit: "px",
 };
@@ -95,2 +97,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/swap/index.js

@@ -40,3 +40,3 @@ import React from "react";
 
-const getBalls = ({ countBalls, color, size }) => {
+const getBalls = ({ countBalls, color, size, sizeUnit }) => {
     const balls = [];
@@ -52,2 +52,3 @@ for (let i = 0; i < countBalls; i++) {
                 index={i}
+                sizeUnit={sizeUnit}
             />,
@@ -59,8 +60,8 @@ );
 
-export const SwapSpinner = ({ size, color, loading }) => {
+export const SwapSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBalls = 3;
     return (
         loading && (
-            <Wrapper size={size}>
-                {getBalls({ countBalls, color, size })}
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getBalls({ countBalls, color, size, sizeUnit })}
             </Wrapper>
@@ -76,4 +77,4 @@ )
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size / 2 + props.size / 8}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size / 2 + props.size / 8}${props.sizeUnit}`};
 `;
@@ -83,6 +84,6 @@
     position: absolute;
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
-    width: ${props => props.size / 4}px;
-    height: ${props => props.size / 4}px;
+    top: ${props => `${props.y}${props.sizeUnit}`};
+    left: ${props => `${props.x}${props.sizeUnit}`};
+    width: ${props => `${props.size / 4}${props.sizeUnit}`};
+    height: ${props => `${props.size / 4}${props.sizeUnit}`};
     border-radius: 50%;
@@ -101,2 +102,3 @@ background-color: ${props => props.color};
     color: "#4b4c56",
+    sizeUnit: "px",
 };
@@ -108,2 +110,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/swish/index.js

@@ -12,3 +12,9 @@ import React from "react";
 
-const getBalls = ({ countBallsInLine, frontColor, backColor, size }) => {
+const getBalls = ({
+    countBallsInLine,
+    frontColor,
+    backColor,
+    size,
+    sizeUnit,
+}) => {
     const balls = [];
@@ -27,2 +33,3 @@ let keyValue = 0;
                     index={keyValue}
+                    sizeUnit={sizeUnit}
                 />,
@@ -36,8 +43,20 @@ );
 
-export const SwishSpinner = ({ size, frontColor, backColor, loading }) => {
+export const SwishSpinner = ({
+    size,
+    frontColor,
+    backColor,
+    loading,
+    sizeUnit,
+}) => {
     const countBallsInLine = 3;
     return (
         loading && (
-            <Wrapper size={size}>
-                {getBalls({ countBallsInLine, frontColor, backColor, size })}
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getBalls({
+                    countBallsInLine,
+                    frontColor,
+                    backColor,
+                    size,
+                    sizeUnit,
+                })}
             </Wrapper>
@@ -53,4 +72,4 @@ )
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
 `;
@@ -60,6 +79,6 @@
     position: absolute;
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
-    width: ${props => props.size / 5}px;
-    height: ${props => props.size / 5}px;
+    top: ${props => `${props.y}${props.sizeUnit}`};
+    left: ${props => `${props.x}${props.sizeUnit}`};
+    width: ${props => `${props.size / 5}${props.sizeUnit}`};
+    height: ${props => `${props.size / 5}${props.sizeUnit}`};
     border-radius: 3px;
@@ -77,2 +96,3 @@ background-color: ${props => props.frontColor};
     backColor: "#fff",
+    sizeUnit: "px",
 };
@@ -85,2 +105,3 @@
     backColor: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/trace/index.js

@@ -7,12 +7,12 @@ import React from "react";
     0% {
-        border: ${props.size / 10}px solid ${props.backColor};
+        border: ${props.size / 10}${props.sizeUnit} solid ${props.backColor};
     }
     25% {
-        border: ${props.size / 10}px solid ${props.frontColor};
+        border: ${props.size / 10}${props.sizeUnit} solid ${props.frontColor};
     }
     50% {
-        border: ${props.size / 10}px solid ${props.backColor};
+        border: ${props.size / 10}${props.sizeUnit} solid ${props.backColor};
     }
     100% {
-        border: ${props.size / 10}px solid ${props.backColor};
+        border: ${props.size / 10}${props.sizeUnit} solid ${props.backColor};
     }
@@ -23,10 +23,15 @@ `;
     25% {
-        transform: translate(${props.size / 2 + props.size / 10}px, 0);
+        transform: translate(${props.size / 2 + props.size / 10}${
+    props.sizeUnit
+}, 0);
     }
     50% {
-        transform: translate(${props.size / 2 +
-            props.size / 10}px, ${props.size / 2 + props.size / 10}px);
+        transform: translate(${props.size / 2 + props.size / 10}${
+    props.sizeUnit
+}, ${props.size / 2 + props.size / 10}${props.sizeUnit});
     }
     75% {
-        transform: translate(0, ${props.size / 2 + props.size / 10}px);
+        transform: translate(0, ${props.size / 2 + props.size / 10}${
+    props.sizeUnit
+});
     }
@@ -38,3 +43,3 @@ 100% {
 
-const getBalls = ({ countBalls, frontColor, backColor, size }) => {
+const getBalls = ({ countBalls, frontColor, backColor, size, sizeUnit }) => {
     const balls = [];
@@ -54,2 +59,3 @@ let indexes = [0, 1, 3, 2];
                     index={indexes[counter]}
+                    sizeUnit={sizeUnit}
                 />,
@@ -63,9 +69,25 @@ );
 
-export const TraceSpinner = ({ size, frontColor, backColor, loading }) => {
+export const TraceSpinner = ({
+    size,
+    frontColor,
+    backColor,
+    loading,
+    sizeUnit,
+}) => {
     const countBalls = 4;
     return (
         loading && (
-            <Wrapper size={size}>
-                {getBalls({ countBalls, frontColor, backColor, size })}
-                <MovedBall frontColor={frontColor} size={size} />
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getBalls({
+                    countBalls,
+                    frontColor,
+                    backColor,
+                    size,
+                    sizeUnit,
+                })}
+                <MovedBall
+                    frontColor={frontColor}
+                    size={size}
+                    sizeUnit={sizeUnit}
+                />
             </Wrapper>
@@ -81,4 +103,4 @@ )
     align-items: center;
-    width: ${props => props.size}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
     transform: rotate(45deg);
@@ -89,9 +111,10 @@ `;
     position: absolute;
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
-    width: ${props => props.size / 5}px;
-    height: ${props => props.size / 5}px;
+    top: ${props => `${props.y}${props.sizeUnit}`};
+    left: ${props => `${props.x}${props.sizeUnit}`};
+    width: ${props => `${props.size / 5}${props.sizeUnit}`};
+    height: ${props => `${props.size / 5}${props.sizeUnit}`};
     border-radius: 50%;
     background-color: transparent;
-    border: ${props => props.size / 10}px solid ${props => props.backColor};
+    border: ${props => `${props.size / 10}${props.sizeUnit}`} solid
+        ${props => props.backColor};
     animation: ${trace} 4s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
@@ -115,2 +138,3 @@ animation-delay: ${props => props.index * 1}s;
     backColor: "#4b4c56",
+    sizeUnit: "px",
 };
@@ -123,2 +147,3 @@
     backColor: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

src/components/wave/index.js

@@ -18,3 +18,3 @@ import React from "react";
 
-const getBars = ({ countBars, color, size }) => {
+const getBars = ({ countBars, color, size, sizeUnit }) => {
     const bars = [];
@@ -30,2 +30,3 @@ for (let i = 0; i < countBars; i++) {
                 index={i}
+                sizeUnit={sizeUnit}
             />,
@@ -37,7 +38,9 @@ );
 
-export const WaveSpinner = ({ size, color, loading }) => {
+export const WaveSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBars = 10;
     return (
         loading && (
-            <Wrapper size={size}>{getBars({ countBars, color, size })}</Wrapper>
+            <Wrapper size={size} sizeUnit={sizeUnit}>
+                {getBars({ countBars, color, size, sizeUnit })}
+            </Wrapper>
         )
@@ -52,4 +55,4 @@ );
     align-items: center;
-    width: ${props => props.size * 2.5}px;
-    height: ${props => props.size}px;
+    width: ${props => `${props.size * 2.5}${props.sizeUnit}`};
+    height: ${props => `${props.size}${props.sizeUnit}`};
     overflow: hidden;
@@ -60,7 +63,7 @@ `;
     position: absolute;
-    top: ${props => props.y + props.size / 10}px;
-    left: ${props => props.x}px;
-    width: ${props => props.size / 5}px;
-    height: ${props => props.size / 10}px;
-    margin-top: ${props => props.size - props.size / 10}px;
+    top: ${props => `${props.y + props.size / 10}${props.sizeUnit}`};
+    left: ${props => `${props.x}${props.sizeUnit}`};
+    width: ${props => `${props.size / 5}${props.sizeUnit}`};
+    height: ${props => `${props.size / 10}${props.sizeUnit}`};
+    margin-top: ${props => `${props.size - props.size / 10}${props.sizeUnit}`};
     transform: skewY(0deg);
@@ -76,2 +79,3 @@ background-color: ${props => props.color};
     color: "#fff",
+    sizeUnit: "px",
 };
@@ -83,2 +87,3 @@
     color: PropTypes.string,
+    sizeUnit: PropTypes.string,
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

207723

increased by11.82%

Lines of code

3099

increased by14.4%

No dependency changes