8 files changed, 341 insertions, 0 deletions
diff --git a/src/components/atoms/loaders/progress-bar.module.scss b/src/components/atoms/loaders/progress-bar.module.scss
new file mode 100644
index 0000000..878010a
--- /dev/null
+++ b/src/components/atoms/loaders/progress-bar.module.scss
@@ -0,0 +1,43 @@
+@use "@styles/abstracts/functions" as fun;
+
+.progress {
+  margin: var(--spacing-sm) auto var(--spacing-md);
+  text-align: center;
+
+  &__info {
+    margin-bottom: var(--spacing-2xs);
+    font-size: var(--font-size-sm);
+  }
+
+  &__bar[value] {
+    display: block;
+    width: clamp(25ch, 20vw, 30ch);
+    max-width: 100%;
+    height: fun.convert-px(13);
+    margin: auto;
+    appearance: none;
+    background: var(--color-bg-tertiary);
+    border: fun.convert-px(1) solid var(--color-primary-darker);
+    border-radius: 1em;
+    box-shadow: inset 0 0 fun.convert-px(4) fun.convert-px(1)
+      var(--color-shadow-light);
+
+    &::-webkit-progress-value {
+      background-color: var(--color-primary-dark);
+      border-radius: 1em;
+    }
+
+    &::-moz-progress-bar {
+      background-color: var(--color-primary-dark);
+      border-radius: 1em;
+    }
+
+    &::-webkit-progress-bar {
+      background: var(--color-bg-tertiary);
+      border: fun.convert-px(1) solid var(--color-primary-darker);
+      border-radius: 1em;
+      box-shadow: inset 0 0 fun.convert-px(4) fun.convert-px(1)
+        var(--color-shadow-light);
+    }
+  }
+}
diff --git a/src/components/atoms/loaders/progress-bar.stories.tsx b/src/components/atoms/loaders/progress-bar.stories.tsx
new file mode 100644
index 0000000..fcd631c
--- /dev/null
+++ b/src/components/atoms/loaders/progress-bar.stories.tsx
@@ -0,0 +1,93 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import ProgressBarComponent from './progress-bar';
+
+/**
+ * ProgressBar - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Loaders/ProgressBar',
+  component: ProgressBarComponent,
+  argTypes: {
+    'aria-label': {
+      control: {
+        type: 'string',
+      },
+      description: 'An accessible name.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    current: {
+      control: {
+        type: 'number',
+      },
+      description: 'The current value.',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    info: {
+      control: {
+        type: 'text',
+      },
+      description: 'An additional information to display.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    max: {
+      control: {
+        type: 'number',
+      },
+      description: 'The maximal value.',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    min: {
+      control: {
+        type: 'number',
+      },
+      description: 'The minimal value.',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof ProgressBarComponent>;
+
+const Template: ComponentStory<typeof ProgressBarComponent> = (args) => (
+  <ProgressBarComponent {...args} />
+);
+
+/**
+ * Loaders Stories - Default Progress bar
+ */
+export const ProgressBar = Template.bind({});
+ProgressBar.args = {
+  current: 10,
+  min: 0,
+  max: 50,
+};
+
+/**
+ * Loaders Stories - Progress bar With Info
+ */
+export const ProgressBarWithInfo = Template.bind({});
+ProgressBarWithInfo.args = {
+  current: 10,
+  info: 'Loaded: 10 / 50',
+  min: 0,
+  max: 50,
+};
diff --git a/src/components/atoms/loaders/progress-bar.test.tsx b/src/components/atoms/loaders/progress-bar.test.tsx
new file mode 100644
index 0000000..37a7364
--- /dev/null
+++ b/src/components/atoms/loaders/progress-bar.test.tsx
@@ -0,0 +1,9 @@
+import { render, screen } from '@test-utils';
+import ProgressBar from './progress-bar';
+
+describe('ProgressBar', () => {
+  it('renders a progress bar', () => {
+    render(<ProgressBar min={0} max={50} current={10} />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/atoms/loaders/progress-bar.tsx b/src/components/atoms/loaders/progress-bar.tsx
new file mode 100644
index 0000000..9bac847
--- /dev/null
+++ b/src/components/atoms/loaders/progress-bar.tsx
@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import styles from './progress-bar.module.scss';
+
+export type ProgressBarProps = {
+  /**
+   * Accessible progress bar name.
+   */
+  'aria-label'?: string;
+  /**
+   * Current value.
+   */
+  current: number;
+  /**
+   * Additional information to display before progress bar.
+   */
+  info?: string;
+  /**
+   * Minimal value.
+   */
+  min: number;
+  /**
+   * Maximal value.
+   */
+  max: number;
+};
+
+/**
+ * ProgressBar component
+ *
+ * Render a progress bar.
+ */
+const ProgressBar: FC<ProgressBarProps> = ({
+  current,
+  info,
+  min,
+  max,
+  ...props
+}) => {
+  return (
+    <div className={styles.progress}>
+      {info && <div className={styles.progress__info}>{info}</div>}
+      <progress
+        className={styles.progress__bar}
+        max={max}
+        value={current}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={current}
+        {...props}
+      ></progress>
+    </div>
+  );
+};
+
+export default ProgressBar;
diff --git a/src/components/atoms/loaders/spinner.module.scss b/src/components/atoms/loaders/spinner.module.scss
new file mode 100644
index 0000000..8d818a2
--- /dev/null
+++ b/src/components/atoms/loaders/spinner.module.scss
@@ -0,0 +1,48 @@
+@use "@styles/abstracts/functions" as fun;
+
+.wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2xs);
+  margin: var(--spacing-md) 0;
+}
+
+.ball {
+  width: fun.convert-px(8);
+  height: fun.convert-px(8);
+  background: linear-gradient(
+    to right,
+    var(--color-primary-light) 0%,
+    var(--color-primary-lighter) 100%
+  );
+  border-radius: 50%;
+  animation: spinner 1.4s infinite ease-in-out both;
+
+  &:first-child {
+    animation-delay: -0.32s;
+  }
+
+  &:nth-child(2) {
+    animation-delay: -0.16s;
+  }
+}
+
+.text {
+  margin-left: var(--spacing-xs);
+  color: var(--color-primary-darker);
+  text-align: center;
+}
+
+@keyframes spinner {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+  }
+}
diff --git a/src/components/atoms/loaders/spinner.stories.tsx b/src/components/atoms/loaders/spinner.stories.tsx
new file mode 100644
index 0000000..1792c6c
--- /dev/null
+++ b/src/components/atoms/loaders/spinner.stories.tsx
@@ -0,0 +1,42 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import SpinnerComponent from './spinner';
+
+/**
+ * Spinner - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Loaders/Spinner',
+  component: SpinnerComponent,
+  argTypes: {
+    message: {
+      control: {
+        type: 'text',
+      },
+      description: 'Loading message.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof SpinnerComponent>;
+
+const Template: ComponentStory<typeof SpinnerComponent> = (args) => (
+  <SpinnerComponent {...args} />
+);
+
+/**
+ * Loaders Stories - Default Spinner
+ */
+export const Spinner = Template.bind({});
+
+/**
+ * Loaders Stories - Spinner with custom message
+ */
+export const SpinnerCustomMessage = Template.bind({});
+SpinnerCustomMessage.args = {
+  message: 'Submitting...',
+};
diff --git a/src/components/atoms/loaders/spinner.test.tsx b/src/components/atoms/loaders/spinner.test.tsx
new file mode 100644
index 0000000..0a6db91
--- /dev/null
+++ b/src/components/atoms/loaders/spinner.test.tsx
@@ -0,0 +1,14 @@
+import { render, screen } from '@test-utils';
+import Spinner from './spinner';
+
+describe('Spinner', () => {
+  it('renders a spinner loader', () => {
+    render(<Spinner />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('renders a spinner loader with a custom message', () => {
+    render(<Spinner message="Submitting" />);
+    expect(screen.getByText('Submitting')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/atoms/loaders/spinner.tsx b/src/components/atoms/loaders/spinner.tsx
new file mode 100644
index 0000000..6655141
--- /dev/null
+++ b/src/components/atoms/loaders/spinner.tsx
@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import styles from './spinner.module.scss';
+
+export type SpinnerProps = {
+  /**
+   * The loading message. Default: "Loading...".
+   */
+  message?: string;
+};
+
+/**
+ * Spinner component
+ *
+ * Render a loading message with animation.
+ */
+const Spinner: FC<SpinnerProps> = ({ message }) => {
+  const intl = useIntl();
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.ball}></div>
+      <div className={styles.ball}></div>
+      <div className={styles.ball}></div>
+      <div className={styles.text}>
+        {message ||
+          intl.formatMessage({
+            defaultMessage: 'Loading...',
+            description: 'Spinner: loading text',
+            id: 'q9cJQe',
+          })}
+      </div>
+    </div>
+  );
+};
+
+export default Spinner;