improve animation

bancorprotocol · Dec 18, 2024 · ca70ab0 · ca70ab0
1 parent bd2b8a4
commit ca70ab0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/src/components/activity/ActivityExport.module.css b/src/components/activity/ActivityExport.module.css
@@ -48,3 +48,16 @@
 .export-button:disabled .loading {
   transition-delay: 200ms;
 }
+.export-button:disabled .loading path {
+  transform-origin: center;
+  animation: rotate 0.6s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: 0;
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/activity/ActivityExport.tsx b/src/components/activity/ActivityExport.tsx
@@ -120,16 +120,7 @@ export const ActivityExport = () => {
           <path
             fill="currentColor"
             d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
-          >
-            <animateTransform
-              attributeName="transform"
-              type="rotate"
-              from="0 25 25"
-              to="360 25 25"
-              dur="0.6s"
-              repeatCount="indefinite"
-            />
-          </path>
+          />
         </svg>
       </button>
       {!!size && size > limit && (