diff --git a/src/components/Spinner/Spinner.stories.tsx b/src/components/Spinner/Spinner.stories.tsx
new file mode 100644
index 0000000000..8b5f605b75
--- /dev/null
+++ b/src/components/Spinner/Spinner.stories.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import Spinner from '@/components/Spinner';
+
+export default {
+ component: Spinner,
+ title: 'Spinner',
+} as Meta;
+
+const Template: StoryFn = () => ;
+
+export const Default = Template.bind({});
diff --git a/src/components/Spinner/index.tsx b/src/components/Spinner/index.tsx
new file mode 100644
index 0000000000..8b8323c963
--- /dev/null
+++ b/src/components/Spinner/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+interface SpinnerProps {
+ size?: string;
+ color?: string;
+}
+const StyledDefaultLoading = styled.div`
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ display: inline-block;
+ box-sizing: border-box;
+ animation: rotation 1s linear infinite;
+ border: 5px solid #000;
+
+ ${(props) => {
+ return (
+ props.size &&
+ css`
+ width: ${props.size};
+ height: ${props.size};
+ `
+ );
+ }}
+
+ ${(props) => {
+ return (
+ props.color &&
+ css`
+ border: 5px solid ${props.color}
+ height: ${props.size};
+ `
+ );
+ }}
+
+ border-bottom-color: transparent;
+
+ @keyframes rotation {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+`;
+
+const Spinner: React.FC = ({ ...rest }) => {
+ return ;
+};
+
+export default Spinner;