diff --git a/src/components/common/LoadingCommon/LoadingCommon.module.scss b/src/components/common/LoadingCommon/LoadingCommon.module.scss
new file mode 100644
index 000000000..12eaed54d
--- /dev/null
+++ b/src/components/common/LoadingCommon/LoadingCommon.module.scss
@@ -0,0 +1,31 @@
+@import '../../../styles/utilities';
+
+.loadingCommon:empty {
+    @apply bg-white;
+    border-radius: 50%;
+    border: .7rem solid var(--primary-lightest);
+    border-top: .7rem solid var(--primary);
+    animation: spin 2s linear infinite;
+    margin: auto;
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+    
+
+    &.small {
+        height: 5rem;
+        width: 5rem;
+    }
+
+    &.default {
+        height: 7rem;
+        width: 7rem;
+    }
+
+    &.large {
+        height: 10rem;
+        width: 10rem;
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/LoadingCommon/LoadingCommon.tsx b/src/components/common/LoadingCommon/LoadingCommon.tsx
new file mode 100644
index 000000000..bc2b4e53a
--- /dev/null
+++ b/src/components/common/LoadingCommon/LoadingCommon.tsx
@@ -0,0 +1,26 @@
+import classNames from "classnames";
+import React from "react";
+import s from './LoadingCommon.module.scss'
+
+interface LoadingCommonProps {
+    visible: boolean
+    size?: "small" | "default" | "large",
+    children? : React.ReactNode;
+}
+
+const LoadingCommon = ({ visible, size="default", children }: LoadingCommonProps) => {
+    
+    return (
+        <>
+        {
+            visible && <div className={classNames(s.loadingCommon, {
+                [s[size]]: size
+            })}>
+                {children}
+            </div>
+        }
+        </>
+    )
+}
+
+export default LoadingCommon
\ No newline at end of file