fix: update loading animation

PolymeshAssociation · Dec 9, 2024 · 866123f · 866123f
1 parent c1d3967
commit 866123f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 59 deletions.
diff --git a/packages/ui/src/ui/Loading/Loading.tsx b/packages/ui/src/ui/Loading/Loading.tsx
@@ -6,9 +6,6 @@ import * as sc from './styles';
 
 export const Loading = (props: LoadingProps) => {
   return (
-    <sc.Wrapper {...props}>
-      <span />
-      <span />
-    </sc.Wrapper>
+    <sc.Wrapper {...props} />
   );
 };
diff --git a/packages/ui/src/ui/Loading/styles.ts b/packages/ui/src/ui/Loading/styles.ts
@@ -4,65 +4,20 @@ import type { LoadingProps } from './types';
 import styled, { keyframes } from 'styled-components';
 
 const spin = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(359deg);
-  }
-`;
-
-const mask = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(180deg);
-  }
-  50% {
-    transform: rotate(180deg);
-  }
-  75% {
-    transform: rotate(360deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+from {
+  transform: rotate(0deg);
+}
+to {
+  transform: rotate(360deg);
+}
 `;
 
 export const Wrapper = styled.div<LoadingProps>`
   position: relative;
   width: ${({ small }) => (small ? '18px' : '64px')};
   height: ${({ small }) => (small ? '18px' : '64px')};
-  animation: 1s ${spin} infinite cubic-bezier(0.255, 0.2, 0.315, 0.455);
-  span,
-  span:before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: ${({ small }) => (small ? '9px' : '32px')};
-    height: ${({ small }) => (small ? '18px' : '64px')};
-    overflow: hidden;
-    box-sizing: border-box;
-    transform-origin: 100% 50%;
-    border-top-left-radius: 32px;
-    border-bottom-left-radius: 32px;
-  }
-  span:before {
-    content: '';
-    border-width: ${({ small }) => (small ? '2px' : '5px')};
-    border-color: ${({ theme }: ThemeProps) => theme.colors.primary};
-    border-style: solid;
-    border-right-color: transparent;
-    animation: 4s ${mask} infinite linear;
-  }
-  span:nth-child(1) {
-    transform: rotate(180deg);
-  }
-  span:nth-child(2) {
-    transform: rotate(360deg);
-    &:before {
-      animation-delay: 1s;
-    }
-  }
+  border: ${({ small }) => (small ? '2px' : '5px')} solid ${({ theme }: ThemeProps) => theme.colors.primary};
+  border-radius: 50%;
+  border-top-color: transparent;
+  animation: ${spin} 1s cubic-bezier(0.255, 0.2, 0.315, 0.455) infinite;   
 `;