From f69ae465d7303ad576fbcb3c5f43519d4690706f Mon Sep 17 00:00:00 2001
From: ppacman <smwfkim2@naver.com>
Date: Wed, 12 Apr 2023 19:30:53 +0900
Subject: [PATCH] =?UTF-8?q?[#13]=20Add=20informationPage=20-=20=EB=A1=9C?=
 =?UTF-8?q?=EB=94=A9=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/loading/LoadingSpinner.tsx | 51 +++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/components/loading/LoadingSpinner.tsx

diff --git a/src/components/loading/LoadingSpinner.tsx b/src/components/loading/LoadingSpinner.tsx
new file mode 100644
index 0000000..e60cf87
--- /dev/null
+++ b/src/components/loading/LoadingSpinner.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import styled from "styled-components";
+
+
+
+interface LoadingSpinnerProps {
+  fixed: boolean;
+}
+
+const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({ fixed }) => {
+  return (
+    <SpinnerWrapper fixed={fixed}>
+      <Spinner />
+    </SpinnerWrapper>
+  );
+};
+
+
+
+const Spinner = styled.div`
+  border-top: 2px solid rgba(25, 199, 226, 0.2);
+  border-right: 2px solid rgba(25, 199, 226, 0.2);
+  border-bottom: 2px solid rgba(25, 199, 226, 0.2);
+  border-left: 4px solid #2ad8ff;
+  animation: spin 1s infinite linear;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+const SpinnerWrapper = styled.div<{ fixed: boolean }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: ${(props) => (props.fixed ? "fixed" : "absolute")};
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  z-index: 999;
+`;
+
+
+export default LoadingSpinner;