Load data from api to the page

2026-09-22 20:01:59 +00:00 · 2023-10-27 17:12:48 +07:00
parent 2723cc1694
commit d44eb6ff11
6 changed files with 153 additions and 72 deletions
@@ -0,0 +1,24 @@
+import styled, { keyframes } from 'styled-components';
+
+const rotate = keyframes`
+  to {
+    transform: rotate(1turn)
+  }
+`;
+
+const Spinner = styled.div`
+  margin: 100px auto;
+
+  width: 80px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background:
+    radial-gradient(farthest-side, var(--primary-color) 94%, #0000) top/10px
+      10px no-repeat,
+    conic-gradient(#0000 30%, var(--primary-color));
+  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 0);
+  mask: none;
+  animation: ${rotate} 1.5s infinite linear;
+`;
+
+export default Spinner;