Size (#7)

* fixed the size of loading icon

* add header and height constraint

* updated version

* spinner size fixed

Author: ali-718

example/src/modules/ImageCrush.js

@@ -87,7 +87,8 @@ const ImageCrush = ({
 
   if (!image) {
     return (
-      <>{!hideSpinner && <Spinner icon={spinnerIcon} color={spinnerColor} />}</>
+      <>{!hideSpinner && <Spinner  width={width}
+      height={height} icon={spinnerIcon} color={spinnerColor} />}</>
     );
   }
 

example/src/modules/Spinner/Spinner.js

@@ -1,12 +1,17 @@
 import React from "react";
 import "./styles.css";
 
-export const Spinner = ({icon:Icon, backgroundColor = 'gray'}) => {
+export const Spinner = ({
+  icon: Icon,
+  backgroundColor = "gray",
+  width,
+  height,
+}) => {
   if (Icon) return Icon;
   return (
     <>
-    <style>
-      {`
+      <style>
+        {`
       .assetcrush-lds-roller div:after {
         content: " ";
         display: block;
@@ -18,17 +23,30 @@ export const Spinner = ({icon:Icon, backgroundColor = 'gray'}) => {
         margin: -4px 0 0 -4px;
       }
       `}
-    </style>
-    <div className="assetcrush-lds-roller">
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-    </div>
+      </style>
+      <div
+        style={{
+          transform: `${
+            width < height
+              ? `scale(${height > 100 ? 1 : height / 300},${
+                  height > 100 ? 1 : height / 300
+                })`
+              : `scale(${width > 100 ? 1 : width / 300},${
+                  width > 100 ? 1 : width / 300
+                })`
+          }`,
+        }}
+        className="assetcrush-lds-roller"
+      >
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
     </>
   );
 };