feat(component): making loader configurable

mdhnpm · Feb 21, 2022 · 8a0b205 · 8a0b205
1 parent 0107d6c
commit 8a0b205
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,14 @@
-import React from 'react';
-import { CubeLoadingSpinner } from './CubeLoadingSpinner';
+import React from "react";
+import { CubeLoadingSpinner } from "./CubeLoadingSpinner";
 
 const App = () => (
-  <div style={{ margin: '100px 100px' }}>
-    <CubeLoadingSpinner />
+  <div style={{ margin: "100px 100px" }}>
+    <CubeLoadingSpinner
+      mainColor="black"
+      secondaryColor="gray"
+      spinnerWidth="28px"
+      spinnerSpeed="1.5s"
+    />
   </div>
 );
 

diff --git a/src/CubeLoadingSpinner/CubeLoadingSpinner.tsx b/src/CubeLoadingSpinner/CubeLoadingSpinner.tsx
@@ -39,7 +39,8 @@ interface CubeLoadingSpinnerProps {
 export const CubeLoadingSpinner: React.VFC<CubeLoadingSpinnerProps> = ({
   mainColor = "#141b4d",
   secondaryColor = "#00c389",
-  spinnerWidth = "32px",
+  // 32 looks wired, 30 and 34 works...
+  spinnerWidth = "30px",
   spinnerSpeed = "1.5s",
 }) => (
   <CssVariables