diff --git a/src/components/ui/loading/loading.module.css b/src/components/ui/loading/loading.module.css
new file mode 100644
index 0000000..b12ba9f
--- /dev/null
+++ b/src/components/ui/loading/loading.module.css
@@ -0,0 +1,25 @@
+.wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    min-height: 200px;
+}
+
+.spinner {
+    width: 48px;
+    height: 48px;
+
+    border: 5px solid #e0e0e0;
+    border-top: 5px solid #3498db;
+
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
\ No newline at end of file
diff --git a/src/components/ui/loading/loading.tsx b/src/components/ui/loading/loading.tsx
new file mode 100644
index 0000000..536cc99
--- /dev/null
+++ b/src/components/ui/loading/loading.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import styles from "./loading.module.css";
+
+const Loading: React.FC = () => {
+    return (
+        <div className={styles.wrapper}>
+            <div className={styles.spinner} />
+        </div>
+    );
+};
+
+export default Loading;
\ No newline at end of file
diff --git a/src/stories/Loading.stories.jsx b/src/stories/Loading.stories.jsx
new file mode 100644
index 0000000..6986aa8
--- /dev/null
+++ b/src/stories/Loading.stories.jsx
@@ -0,0 +1,13 @@
+import Loading from "../components/ui/loading/loading.tsx";
+
+
+export default {
+    title: 'UI/Loading',
+    component: Loading,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+
+export const Primary = {};
\ No newline at end of file