diff --git a/src/components/LoadingBar/LoadingBar.stories.tsx b/src/components/LoadingBar/LoadingBar.stories.tsx
new file mode 100644
index 00000000..d326bfe7
--- /dev/null
+++ b/src/components/LoadingBar/LoadingBar.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { Flex } from '../Flex'
+
+import { createPageExport } from '../../utils/storybook'
+import { LoadingBar } from './LoadingBar'
+
+export const Basic = () => (
+  <Flex justifyContent='center' alignItems='center' height='100vh' gap='22px'>
+    <LoadingBar percent={0} />
+    <LoadingBar percent={50} />
+    <LoadingBar percent={100} />
+  </Flex>
+)
+
+export default createPageExport(Basic, 'LoadingBar', ['color', 'size'])
diff --git a/src/components/LoadingBar/LoadingBar.test.tsx b/src/components/LoadingBar/LoadingBar.test.tsx
new file mode 100644
index 00000000..4464e34b
--- /dev/null
+++ b/src/components/LoadingBar/LoadingBar.test.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { render } from '../utils/test/render'
+
+import { LoadingBar } from './LoadingBar'
+
+describe('LoadingBar', () => {
+  it('should have to render without crashing', () => {
+    const component = render(<LoadingBar />)
+    expect(component).toBeTruthy()
+  })
+
+  it('should render an empty bar when percent is 0', () => {
+    const { getByTestId } = render(<LoadingBar percent={0} />)
+    const bar = getByTestId('loading-bar')
+    expect(bar).toHaveStyle(`width: 0%`)
+  })
+
+  it('should render a full bar when percent is 100', () => {
+    const { getByTestId } = render(<LoadingBar percent={100} />)
+    const bar = getByTestId('loading-bar')
+    expect(bar).toHaveStyle(`width: 100%`)
+  })
+})
diff --git a/src/components/LoadingBar/LoadingBar.tsx b/src/components/LoadingBar/LoadingBar.tsx
new file mode 100644
index 00000000..82b2293d
--- /dev/null
+++ b/src/components/LoadingBar/LoadingBar.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { Flex, Props } from '../Flex'
+
+interface LoadingBarProps extends Props {
+  colorBar?: string
+  percent?: number
+}
+
+export const LoadingBar = ({
+  percent = 0,
+  colorBar = 'darkPink',
+  ...props
+}: LoadingBarProps) => {
+  return (
+    <Flex
+      backgroundColor='mediumGrey'
+      height='12px'
+      width='160px'
+      borderRadius='8px'
+      {...props}
+    >
+      <Flex
+        data-testid='loading-bar'
+        backgroundColor={colorBar}
+        height='100%'
+        width={`${percent}%`}
+        borderRadius='8px'
+      />
+    </Flex>
+  )
+}
diff --git a/src/components/LoadingBar/index.ts b/src/components/LoadingBar/index.ts
new file mode 100644
index 00000000..1a60869f
--- /dev/null
+++ b/src/components/LoadingBar/index.ts
@@ -0,0 +1 @@
+export * from './LoadingBar'
diff --git a/src/providers/theme.js b/src/providers/theme.js
index f6e1e0af..a682576e 100644
--- a/src/providers/theme.js
+++ b/src/providers/theme.js
@@ -67,6 +67,7 @@ const colors = {
   // common
   red: '#DE4E51',
   pink: '#EB5387',
+  darkPink: '#9824D4',
   purple: '#A652B4',
   deepPurple: '#8654DE',
   indigo: '#4C60D0',