chore: custom wave loader

web3ui · Dec 15, 2022 · d16cca9 · d16cca9
1 parent 5fda0d3
commit d16cca9
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 7 deletions.
diff --git a/.changeset/fluffy-ducks-own.md b/.changeset/fluffy-ducks-own.md
@@ -0,0 +1,5 @@
+---
+'@web3uikit/core': patch
+---
+
+Custom size for wave loader
diff --git a/packages/core/src/lib/Loading/Loading.stories.tsx b/packages/core/src/lib/Loading/Loading.stories.tsx
@@ -54,3 +54,10 @@ WaveLoaderWithText.args = {
     text: 'Loading...',
     fontSize: 12,
 };
+
+export const WaveLoaderCustomSize = Template.bind({});
+WaveLoaderCustomSize.args = {
+    spinnerType: 'wave',
+    spinnerColor: '#2E7DAF',
+    waveSize: 100,
+};
diff --git a/packages/core/src/lib/Loading/Loading.styles.tsx b/packages/core/src/lib/Loading/Loading.styles.tsx
@@ -49,9 +49,15 @@ export const StyledSpinnerDiv = styled.div<
 
 // const DivStyledWaveLoader = styled.div<Pick<ILoadingProps, 'size' | 'spinnerColor'>>`
 
-const waveAnim = keyframes`
-    from {height: 2px; width: 2px;}
-    to {height: 7px;width: 7px;}
+const waveAnim = (size?: number) => keyframes`
+    from {
+        height: ${size ? Math.ceil(size / 4) + 'px' : '2px'}; 
+        width: ${size ? Math.ceil(size / 4) + 'px' : '2px'};
+    }
+    to {
+        height: ${size ? size + 'px' : '7px'};
+        width: ${size ? size + 'px' : '7px'};
+    }
 `;
 
 export const DivStyledWaveLoader = styled.div<ILoadingProps>`
@@ -62,15 +68,15 @@ export const DivStyledWaveLoader = styled.div<ILoadingProps>`
     span {
         align-items: center;
         display: flex;
-        height: 10px;
+        height: ${(p) => (p.waveSize ? `${p.waveSize + 3}px` : '10px')};
         justify-content: center;
-        width: 10px;
+        width: ${(p) => (p.waveSize ? `${p.waveSize + 3}px` : '10px')};
 
         &:before {
             animation-direction: alternate;
             animation-duration: 0.4s;
             animation-iteration-count: infinite;
-            animation-name: ${waveAnim};
+            animation-name: ${(p) => waveAnim(p.waveSize)};
             background-color: ${(props) => props.spinnerColor};
             border-radius: 50%;
             content: '';

diff --git a/packages/core/src/lib/Loading/Loading.tsx b/packages/core/src/lib/Loading/Loading.tsx
@@ -13,6 +13,7 @@ const Loading: React.FC<ILoadingProps> = ({
     spinnerColor = color.white,
     spinnerType = 'loader',
     text,
+    waveSize,
     ...props
 }) => {
     return (
@@ -28,7 +29,11 @@ const Loading: React.FC<ILoadingProps> = ({
             {spinnerType == 'loader' ? (
                 <StyledSpinnerDiv spinnerColor={spinnerColor} size={size} />
             ) : (
-                <WaveLoader size={size} spinnerColor={spinnerColor} />
+                <WaveLoader
+                    size={size}
+                    spinnerColor={spinnerColor}
+                    waveSize={waveSize}
+                />
             )}
             {text && <span>{text}</span>}
         </StyledSpinnerParent>
@@ -38,6 +43,7 @@ const Loading: React.FC<ILoadingProps> = ({
 const WaveLoader: React.FC<ILoadingProps> = ({
     size,
     spinnerColor,
+    waveSize,
     ...props
 }) => (
     <DivStyledWaveLoader
@@ -47,6 +53,7 @@ const WaveLoader: React.FC<ILoadingProps> = ({
         role="alert"
         size={size}
         spinnerColor={spinnerColor}
+        waveSize={waveSize}
         {...props}
     >
         <span aria-hidden="true" id="anim-delay1"></span>

diff --git a/packages/core/src/lib/Loading/types.ts b/packages/core/src/lib/Loading/types.ts
@@ -16,4 +16,7 @@ export interface ILoadingProps {
 
     // To load text with spinner
     text?: string;
+
+    // The size of the wave loader
+    waveSize?: number;
 }