diff --git a/src/components/EditableHeading/__tests__/editableHeading.jest.js b/src/components/EditableHeading/__tests__/editableHeading.jest.js
index 61ca0bffea..f4bc835b24 100644
--- a/src/components/EditableHeading/__tests__/editableHeading.jest.js
+++ b/src/components/EditableHeading/__tests__/editableHeading.jest.js
@@ -1,6 +1,6 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import { render, cleanup, fireEvent } from "@testing-library/react";
+import { cleanup, fireEvent, render } from "@testing-library/react";
 import EditableHeading from "../EditableHeading";
 import "@testing-library/jest-dom";
 
@@ -55,7 +55,7 @@ describe("EditableHeading", () => {
 
     expect(mockCallback.mock.calls.length).toBe(1);
   });
-  
+
   it("should play the onStartEditing function with params when click on the input element inside the EditableHeading element", () => {
     const mockCallback = jest.fn(x => console.log(x));
     const { getByRole } = render(<EditableHeading onStartEditing={mockCallback} />);
diff --git a/src/components/Loader/Loader.jsx b/src/components/Loader/Loader.jsx
index 7b9db96726..7973a218ae 100644
--- a/src/components/Loader/Loader.jsx
+++ b/src/components/Loader/Loader.jsx
@@ -1,7 +1,9 @@
 import React, { forwardRef, useMemo } from "react";
 import PropTypes from "prop-types";
-import "./Loader.scss";
+import cx from "classnames";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
+import { LOADER_COLORS, LOADER_SIZES, LOADER_TYPES } from "components/Loader/LoaderConstants";
+import styles from "./Loader.module.scss";
 
 const Loader = forwardRef(
   (
@@ -10,13 +12,15 @@ const Loader = forwardRef(
       svgClassName,
       className,
       size,
+      color,
+      hasBackground,
       id
     },
     ref
   ) => {
     const overrideClassName = backwardCompatibilityForProperties([className, svgClassName], "");
 
-    const style = useMemo(() => {
+    const sizeStyle = useMemo(() => {
       if (typeof size === "number") {
         return { width: size, height: size };
       }
@@ -24,28 +28,69 @@ const Loader = forwardRef(
     }, [size]);
 
     return (
-      <div className="monday-loader-component" ref={ref} role="alert" title="loading" style={style} id={id}>
-        <svg className={`circle-loader-spinner ${overrideClassName}`} viewBox="0 0 50 50">
-          <circle className="circle-loader-spinner-path" cx="25" cy="25" r="20" fill="none" strokeWidth="5" />
+      <div
+        className={cx("monday-loader-component", styles.loaderContainer)}
+        ref={ref}
+        role="alert"
+        title="loading"
+        style={sizeStyle}
+        id={id}
+      >
+        <svg
+          className={cx("circle-loader-spinner", styles.circleLoaderSpinner, overrideClassName)}
+          viewBox="0 0 50 50"
+          color={color}
+        >
+          {hasBackground && (
+            <circle
+              className={styles.circleLoaderSpinnerBackground}
+              cx="25"
+              cy="25"
+              r="20"
+              fill="none"
+              strokeWidth="5"
+            />
+          )}
+          <circle
+            className={cx("circle-loader-spinner-path", styles.circleLoaderSpinnerPath)}
+            cx="25"
+            cy="25"
+            r="20"
+            fill="none"
+            strokeWidth="5"
+          />
         </svg>
       </div>
     );
   }
 );
 
+Loader.colors = LOADER_COLORS;
+Loader.sizes = LOADER_SIZES;
+Loader.types = LOADER_TYPES;
+
 Loader.propTypes = {
   id: PropTypes.string,
   className: PropTypes.string,
-  /**
-   * The containing box of the loader
-   */
-  size: PropTypes.number
+  size: PropTypes.oneOfType([
+    PropTypes.oneOf([Loader.sizes.XS, Loader.sizes.SMALL, Loader.sizes.MEDIUM, Loader.sizes.LARGE]),
+    PropTypes.number
+  ]),
+  color: PropTypes.oneOf([
+    Loader.colors.PRIMARY,
+    Loader.colors.ON_PRIMARY,
+    Loader.colors.SECONDARY,
+    Loader.colors.DARK
+  ]),
+  hasBackground: PropTypes.bool
 };
 
 Loader.defaultProps = {
   id: undefined,
   className: undefined,
-  size: undefined
+  size: undefined,
+  color: undefined,
+  hasBackground: false
 };
 
 export default Loader;
diff --git a/src/components/Loader/Loader.scss b/src/components/Loader/Loader.module.scss
similarity index 64%
rename from src/components/Loader/Loader.scss
rename to src/components/Loader/Loader.module.scss
index 499d14d642..27b0affa07 100644
--- a/src/components/Loader/Loader.scss
+++ b/src/components/Loader/Loader.module.scss
@@ -1,19 +1,28 @@
-.monday-loader-component {
+.loaderContainer {
   position: relative;
   height: 100%;
   width: 100%;
 
-  .circle-loader-spinner {
+  .circleLoaderSpinnerBackground {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -50%;
+    margin-left: -50%;
+    stroke: var(--primary-background-hover-color);
+  }
+
+  .circleLoaderSpinner {
     animation: rotate 1s linear infinite;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -50%;
     margin-left: -50%;
+    stroke: currentColor;
+    stroke-linecap: round;
 
-    .circle-loader-spinner-path {
-      stroke: currentColor;
-      stroke-linecap: round;
+    .circleLoaderSpinnerPath {
       animation: dash 1s infinite;
     }
   }
diff --git a/src/components/Loader/LoaderConstants.js b/src/components/Loader/LoaderConstants.js
new file mode 100644
index 0000000000..5ffcdc9a8e
--- /dev/null
+++ b/src/components/Loader/LoaderConstants.js
@@ -0,0 +1,13 @@
+export const LOADER_COLORS = {
+  PRIMARY: "var(--primary-color)",
+  SECONDARY: "var(--secondary-text-color)",
+  ON_PRIMARY: "var(--text-color-on-inverted)",
+  DARK: "var(--primary-text-color)"
+};
+
+export const LOADER_SIZES = {
+  XS: 16,
+  SMALL: 24,
+  MEDIUM: 40,
+  LARGE: 64
+};
diff --git a/src/components/Loader/__stories__/Loader.stories.mdx b/src/components/Loader/__stories__/Loader.stories.mdx
index da8e5cfa5d..73c9d217dc 100644
--- a/src/components/Loader/__stories__/Loader.stories.mdx
+++ b/src/components/Loader/__stories__/Loader.stories.mdx
@@ -1,6 +1,17 @@
 import Loader from "../Loader";
-import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
 import { createComponentTemplate } from "../../../storybook/functions/create-component-story";
+import { StoryDescription } from "../../../storybook/components/story-description/story-description";
+import { Button, DialogContentContainer, Flex, Search } from "components";
+import { ComponentRules, RelatedComponents, Tip, UsageGuidelines } from "../../../storybook";
+import { Link } from "../../../storybook/components";
+import { useCallback, useState } from "react";
+import {
+  BUTTON,
+  PROGRESS_BAR,
+  SKELETON
+} from "../../../storybook/components/related-components/component-description-map";
+
 import "./Loader.stories.scss";
 
 <Meta title="Feedback/Loader" component={Loader} />
@@ -16,14 +27,18 @@ export const loaderTemplate = createComponentTemplate(Loader);
 - [Overview](#overview)
 - [Props](#props)
 - [Usage](#usage)
+- [Variants](#variants)
+- [Do’s and don’ts](#dos-and-donts)
+- [Use cases and examples](#use-cases-and-examples)
+- [Related components](#related-components)
 - [Feedback](#feedback)
 
 ## Overview
 
-Circle loading indication, a general non specific loader
+Circular loader indicates to user waiting state.
 
 <Canvas>
-  <Story name="Overview" args={{ size: 40 }}>
+  <Story name="Overview" args={{ size: Loader.sizes.MEDIUM }}>
     {loaderTemplate.bind({})}
   </Story>
 </Canvas>
@@ -36,20 +51,181 @@ Circle loading indication, a general non specific loader
 
 <UsageGuidelines
   guidelines={[
-    "Use loader component to indicate the user that a task is being performed",
-    "If you expect that a task will be done within 200ms don't show a loader",
-    "Minimize the loaders on the screen"
+    "Use this loader to load small parts of the system, not the whole pages.",
+    "Use sizes of loader in context to its position. The bigger the loading area gets, the bigger loader should be used.",
+    "Always place loader in context to the loading content."
   ]}
 />
 
-### States
+<Tip>
+  While loading content consider using
+  <Link href="/?path=/docs/feedback-skeleton--overview" size={Link.sizes.SMALL}>
+    Skeleton loading
+  </Link>
+</Tip>
+
+## Variants
+
+### Size variants
+
+<Canvas>
+  <Story name="Size variants">
+    <Flex direction={Flex.directions.ROW} gap={Flex.gaps.SMALL}>
+      <StoryDescription description="Xs" vertical align={Flex.align.START}>
+        <div className="monday-storybook-loader_size-variants_container">
+          <Loader size={Loader.sizes.XS} />
+        </div>
+      </StoryDescription>
+      <StoryDescription description="S" vertical align={Flex.align.START}>
+        <div className="monday-storybook-loader_size-variants_container">
+          <Loader size={Loader.sizes.SMALL} />
+        </div>
+      </StoryDescription>
+      <StoryDescription description="M" vertical align={Flex.align.START}>
+        <div className="monday-storybook-loader_size-variants_container">
+          <Loader size={Loader.sizes.MEDIUM} />
+        </div>
+      </StoryDescription>
+      <StoryDescription description="L" vertical align={Flex.align.START}>
+        <div className="monday-storybook-loader_size-variants_container">
+          <Loader size={Loader.sizes.LARGE} />
+        </div>
+      </StoryDescription>
+    </Flex>
+  </Story>
+</Canvas>
+
+### Color variants
+
+<Canvas>
+  <Story name="Color variants">
+    <Flex direction={Flex.directions.ROW} gap={Flex.gaps.SMALL}>
+      <StoryDescription description="Primary" vertical align={Flex.align.START}>
+        <Loader size={Loader.sizes.MEDIUM} color={Loader.colors.PRIMARY} />
+      </StoryDescription>
+      <StoryDescription description="Secondary" vertical align={Flex.align.START}>
+        <Loader size={Loader.sizes.MEDIUM} color={Loader.colors.SECONDARY} />
+      </StoryDescription>
+      <StoryDescription description="Dark" vertical align={Flex.align.START}>
+        <Loader size={Loader.sizes.MEDIUM} color={Loader.colors.DARK} />
+      </StoryDescription>
+      <StoryDescription description="OnPrimary" vertical align={Flex.align.START}>
+        <Flex direction={Flex.directions.ROW}>
+          <div className="monday-storybook-loader_color-variants_on-primary--color-black">
+            <Loader size={Loader.sizes.MEDIUM} color={Loader.colors.ON_PRIMARY} />
+          </div>
+          <div className="monday-storybook-loader_color-variants_on-primary--color-negative">
+            <Loader size={Loader.sizes.MEDIUM} color={Loader.colors.ON_PRIMARY} />
+          </div>
+          <div className="monday-storybook-loader_color-variants_on-primary--color-positive">
+            <Loader size={Loader.sizes.MEDIUM} color={Loader.colors.ON_PRIMARY} />
+          </div>
+          <div className="monday-storybook-loader_color-variants_on-primary--color-primary">
+            <Loader size={Loader.sizes.MEDIUM} color={Loader.colors.ON_PRIMARY} />
+          </div>
+        </Flex>
+      </StoryDescription>
+    </Flex>
+  </Story>
+</Canvas>
 
-Color inheritance - the loader inherits its color from the `color` css attribute
+### Custom colors
+
+If there is a need for color customization, css `color` attribute of a parent component can be used.
 
 <Canvas>
-  <Story name="Color">
-    <div style={{ color: "var(--primary-color)" }}>
-      <Loader size={40} />
+  <Story name="Custom colors">
+    <div style={{ color: "var(--color-dark-red)" }}>
+      <Loader size={Loader.sizes.MEDIUM} />
     </div>
   </Story>
 </Canvas>
+
+### Visual variants
+
+<Canvas>
+  <Story name="Visual variants">
+    <Flex direction={Flex.directions.ROW} gap={Flex.gaps.SMALL}>
+      <StoryDescription description="Casual" vertical align={Flex.align.START}>
+        <div align="left">
+          <Loader size={Loader.sizes.MEDIUM} />
+        </div>
+      </StoryDescription>
+      <StoryDescription
+        description="With background"
+        vertical
+        align={Flex.align.START}
+        headerStyle={{ width: "fitContent" }}
+      >
+        <div align="left">
+          <Loader size={Loader.sizes.MEDIUM} hasBackground />
+        </div>
+      </StoryDescription>
+    </Flex>
+  </Story>
+</Canvas>
+
+## Do’s and Don’ts
+
+<ComponentRules
+  rules={[
+    {
+      positive: {
+        component: (
+          <Flex direction={Flex.directions.ROW}>
+            <div className="monday-storybook-loader_dos-and-donts_heading">H1 heading component</div>
+            <Loader size={Loader.sizes.SMALL} hasBackground />
+          </Flex>
+        ),
+        description: "Place loader in context to the loading content and keep its size proportional to the content."
+      },
+      negative: {
+        component: (
+          <Flex direction={Flex.directions.ROW}>
+            <div className="monday-storybook-loader_dos-and-donts_heading">H1 heading component</div>
+            <Loader size={Loader.sizes.LARGE} hasBackground />
+          </Flex>
+        ),
+        description: "Don’t leave the size visually unmaintained."
+      }
+    }
+  ]}
+/>
+
+## Use cases and examples
+
+### Loader in text field
+
+Use loader in search field while filtering results.
+
+<Canvas>
+  <Story name="Loader in text field">
+    <DialogContentContainer>
+      <Search loading placeholder="Board name" />
+    </DialogContentContainer>
+  </Story>
+</Canvas>
+
+### Loader in button
+
+Indicate the loading status in button if content or an action is loading.
+
+<Canvas>
+  <Story name="Loader in button">
+    {() => {
+      const [loading, setLoading] = useState(false);
+      const onClick = useCallback(() => {
+        setLoading(true);
+      }, [setLoading]);
+      return (
+        <Button loading={loading} onClick={onClick}>
+          Click here for loading
+        </Button>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Related components
+
+<RelatedComponents componentsNames={[SKELETON, PROGRESS_BAR, BUTTON]} />
diff --git a/src/components/Loader/__stories__/Loader.stories.scss b/src/components/Loader/__stories__/Loader.stories.scss
index 86be60c22d..517569692d 100644
--- a/src/components/Loader/__stories__/Loader.stories.scss
+++ b/src/components/Loader/__stories__/Loader.stories.scss
@@ -1,7 +1,43 @@
 @import "../../../styles/themes";
 
 .monday-storybook-loader {
-  width: 40px;
-  height: 40px;
-  position: relative !important;
+  &_color-variants {
+    &_on-primary {
+      width: 50px;
+      height: 50px;
+      padding: 5px;
+
+      &--color {
+        &-black {
+          background: var(--primary-text-color);
+        }
+
+        &-negative {
+          background: var(--negative-color);
+        }
+
+        &-positive {
+          background: var(--positive-color);
+        }
+
+        &-primary {
+          background: var(--primary-color);
+        }
+      }
+    }
+  }
+
+  &_size-variants {
+    &_container {
+      width: 64px;
+      height: 64px;
+    }
+  }
+
+  &_dos-and-donts {
+    &_heading {
+      font-size: 32px !important;
+      margin-right: var(--spacing-small) !important;
+    }
+  }
 }
diff --git a/src/components/Loader/__tests__/Loader.jest.js b/src/components/Loader/__tests__/Loader.jest.js
index 13e3140f83..668fda9f4c 100644
--- a/src/components/Loader/__tests__/Loader.jest.js
+++ b/src/components/Loader/__tests__/Loader.jest.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { render, cleanup } from "@testing-library/react";
+import { cleanup, render } from "@testing-library/react";
 import Loader from "../Loader";
 
 describe("<Loader />", () => {
@@ -9,7 +9,7 @@ describe("<Loader />", () => {
 
   it("should be able to forward ref", () => {
     const ref = React.createRef();
-    render(<Loader ref={ref} />);
-    expect(ref.current.classList.contains("monday-loader-component")).toEqual(true);
+    render(<Loader ref={ref} className="ref-class-name" />);
+    expect(ref.current.querySelector(".ref-class-name")).toBeInTheDOM;
   });
 });
diff --git a/src/components/Loader/__tests__/__snapshots__/loader-snapshots.jest.js.snap b/src/components/Loader/__tests__/__snapshots__/loader-snapshots.jest.js.snap
index f806f88f08..f6abf48558 100644
--- a/src/components/Loader/__tests__/__snapshots__/loader-snapshots.jest.js.snap
+++ b/src/components/Loader/__tests__/__snapshots__/loader-snapshots.jest.js.snap
@@ -1,9 +1,131 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly with custom class name 1`] = `
+exports[`Loader renders correctly with color variants with DARK color 1`] = `
 <div
   className="monday-loader-component"
   role="alert"
+  style={
+    Object {
+      "height": 40,
+      "width": 40,
+    }
+  }
+  title="loading"
+>
+  <svg
+    className="circle-loader-spinner"
+    color="var(--primary-text-color)"
+    viewBox="0 0 50 50"
+  >
+    <circle
+      className="circle-loader-spinner-path"
+      cx="25"
+      cy="25"
+      fill="none"
+      r="20"
+      strokeWidth="5"
+    />
+  </svg>
+</div>
+`;
+
+exports[`Loader renders correctly with color variants with ON_PRIMARY color 1`] = `
+<div
+  className="monday-loader-component"
+  role="alert"
+  style={
+    Object {
+      "height": 40,
+      "width": 40,
+    }
+  }
+  title="loading"
+>
+  <svg
+    className="circle-loader-spinner"
+    color="var(--text-color-on-inverted)"
+    viewBox="0 0 50 50"
+  >
+    <circle
+      className="circle-loader-spinner-path"
+      cx="25"
+      cy="25"
+      fill="none"
+      r="20"
+      strokeWidth="5"
+    />
+  </svg>
+</div>
+`;
+
+exports[`Loader renders correctly with color variants with PRIMARY color 1`] = `
+<div
+  className="monday-loader-component"
+  role="alert"
+  style={
+    Object {
+      "height": 40,
+      "width": 40,
+    }
+  }
+  title="loading"
+>
+  <svg
+    className="circle-loader-spinner"
+    color="var(--primary-color)"
+    viewBox="0 0 50 50"
+  >
+    <circle
+      className="circle-loader-spinner-path"
+      cx="25"
+      cy="25"
+      fill="none"
+      r="20"
+      strokeWidth="5"
+    />
+  </svg>
+</div>
+`;
+
+exports[`Loader renders correctly with color variants with SECONDARY color 1`] = `
+<div
+  className="monday-loader-component"
+  role="alert"
+  style={
+    Object {
+      "height": 40,
+      "width": 40,
+    }
+  }
+  title="loading"
+>
+  <svg
+    className="circle-loader-spinner"
+    color="var(--secondary-text-color)"
+    viewBox="0 0 50 50"
+  >
+    <circle
+      className="circle-loader-spinner-path"
+      cx="25"
+      cy="25"
+      fill="none"
+      r="20"
+      strokeWidth="5"
+    />
+  </svg>
+</div>
+`;
+
+exports[`Loader renders correctly with custom class name 1`] = `
+<div
+  className="monday-loader-component"
+  role="alert"
+  style={
+    Object {
+      "height": 40,
+      "width": 40,
+    }
+  }
   title="loading"
 >
   <svg
@@ -22,14 +144,20 @@ exports[`renders correctly with custom class name 1`] = `
 </div>
 `;
 
-exports[`renders correctly with empty props 1`] = `
+exports[`Loader renders correctly with size variants with LARGE size 1`] = `
 <div
   className="monday-loader-component"
   role="alert"
+  style={
+    Object {
+      "height": 64,
+      "width": 64,
+    }
+  }
   title="loading"
 >
   <svg
-    className="circle-loader-spinner "
+    className="circle-loader-spinner"
     viewBox="0 0 50 50"
   >
     <circle
@@ -43,3 +171,150 @@ exports[`renders correctly with empty props 1`] = `
   </svg>
 </div>
 `;
+
+exports[`Loader renders correctly with size variants with MEDIUM size 1`] = `
+<div
+  className="monday-loader-component"
+  role="alert"
+  style={
+    Object {
+      "height": 40,
+      "width": 40,
+    }
+  }
+  title="loading"
+>
+  <svg
+    className="circle-loader-spinner"
+    viewBox="0 0 50 50"
+  >
+    <circle
+      className="circle-loader-spinner-path"
+      cx="25"
+      cy="25"
+      fill="none"
+      r="20"
+      strokeWidth="5"
+    />
+  </svg>
+</div>
+`;
+
+exports[`Loader renders correctly with size variants with SMALL size 1`] = `
+<div
+  className="monday-loader-component"
+  role="alert"
+  style={
+    Object {
+      "height": 24,
+      "width": 24,
+    }
+  }
+  title="loading"
+>
+  <svg
+    className="circle-loader-spinner"
+    viewBox="0 0 50 50"
+  >
+    <circle
+      className="circle-loader-spinner-path"
+      cx="25"
+      cy="25"
+      fill="none"
+      r="20"
+      strokeWidth="5"
+    />
+  </svg>
+</div>
+`;
+
+exports[`Loader renders correctly with size variants with XS size 1`] = `
+<div
+  className="monday-loader-component"
+  role="alert"
+  style={
+    Object {
+      "height": 16,
+      "width": 16,
+    }
+  }
+  title="loading"
+>
+  <svg
+    className="circle-loader-spinner"
+    viewBox="0 0 50 50"
+  >
+    <circle
+      className="circle-loader-spinner-path"
+      cx="25"
+      cy="25"
+      fill="none"
+      r="20"
+      strokeWidth="5"
+    />
+  </svg>
+</div>
+`;
+
+exports[`Loader renders correctly with size variants with custom size as number 1`] = `
+<div
+  className="monday-loader-component"
+  role="alert"
+  style={
+    Object {
+      "height": 100,
+      "width": 100,
+    }
+  }
+  title="loading"
+>
+  <svg
+    className="circle-loader-spinner"
+    viewBox="0 0 50 50"
+  >
+    <circle
+      className="circle-loader-spinner-path"
+      cx="25"
+      cy="25"
+      fill="none"
+      r="20"
+      strokeWidth="5"
+    />
+  </svg>
+</div>
+`;
+
+exports[`Loader renders correctly with visual variants with background 1`] = `
+<div
+  className="monday-loader-component"
+  role="alert"
+  style={
+    Object {
+      "height": 40,
+      "width": 40,
+    }
+  }
+  title="loading"
+>
+  <svg
+    className="circle-loader-spinner"
+    viewBox="0 0 50 50"
+  >
+    <circle
+      cx="25"
+      cy="25"
+      fill="none"
+      r="20"
+      strokeWidth="5"
+    />
+    <circle
+      className="circle-loader-spinner-path"
+      cx="25"
+      cy="25"
+      fill="none"
+      r="20"
+      strokeWidth="5"
+    />
+  </svg>
+</div>
+`;
diff --git a/src/components/Loader/__tests__/loader-snapshots.jest.js b/src/components/Loader/__tests__/loader-snapshots.jest.js
index 215314f7b5..c8f8907578 100644
--- a/src/components/Loader/__tests__/loader-snapshots.jest.js
+++ b/src/components/Loader/__tests__/loader-snapshots.jest.js
@@ -2,12 +2,65 @@ import React from "react";
 import renderer from "react-test-renderer";
 import Loader from "../Loader";
 
-it("renders correctly with empty props", () => {
-  const tree = renderer.create(<Loader />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+describe("Loader renders correctly", () => {
+  it("with custom class name", () => {
+    const tree = renderer.create(<Loader size={Loader.sizes.MEDIUM} className="dummy-class-name" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  describe("with size variants", () => {
+    it("with XS size", () => {
+      const tree = renderer.create(<Loader size={Loader.sizes.XS} />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it("with SMALL size", () => {
+      const tree = renderer.create(<Loader size={Loader.sizes.SMALL} />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it("with MEDIUM size", () => {
+      const tree = renderer.create(<Loader size={Loader.sizes.MEDIUM} />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it("with LARGE size", () => {
+      const tree = renderer.create(<Loader size={Loader.sizes.LARGE} />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it("with custom size as number", () => {
+      const tree = renderer.create(<Loader size={100} />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe("with color variants", () => {
+    it("with PRIMARY color", () => {
+      const tree = renderer.create(<Loader size={Loader.sizes.MEDIUM} color={Loader.colors.PRIMARY} />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it("with ON_PRIMARY color", () => {
+      const tree = renderer.create(<Loader size={Loader.sizes.MEDIUM} color={Loader.colors.ON_PRIMARY} />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it("with SECONDARY color", () => {
+      const tree = renderer.create(<Loader size={Loader.sizes.MEDIUM} color={Loader.colors.SECONDARY} />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it("with DARK color", () => {
+      const tree = renderer.create(<Loader size={Loader.sizes.MEDIUM} color={Loader.colors.DARK} />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
 
-it("renders correctly with custom class name", () => {
-  const tree = renderer.create(<Loader className="dummy-class-name" />).toJSON();
-  expect(tree).toMatchSnapshot();
+  describe("with visual variants", () => {
+    it("with background", () => {
+      const tree = renderer.create(<Loader size={Loader.sizes.MEDIUM} hasBackground />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
 });