Loader docs + preview (#173)

@stellar/design-system-website/docs/components/elements/loader.mdx

@@ -0,0 +1,19 @@
+---
+slug: /loader
+---
+
+# Loader
+
+<ComponentDescription componentName="Loader" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Loader">
+  <Loader />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Loader" />

@stellar/design-system-website/src/componentPreview/loaderPreview.tsx

@@ -0,0 +1,24 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const loaderPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "size",
+      options: [
+        {
+          value: "",
+          label: "Default size",
+        },
+        {
+          value: "2rem",
+          label: "2 rem",
+        },
+        {
+          value: "3rem",
+          label: "3 rem",
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/src/components/PreviewBlock/index.tsx

@@ -13,6 +13,7 @@ import { buttonPreview } from "@site/src/componentPreview/buttonPreview";
 import { captionPreview } from "@site/src/componentPreview/captionPreview";
 import { headingPreview } from "@site/src/componentPreview/headingPreview";
 import { linkPreview } from "@site/src/componentPreview/linkPreview";
+import { loaderPreview } from "@site/src/componentPreview/loaderPreview";
 import { notificationPreview } from "@site/src/componentPreview/notificationPreview ";
 import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { profilePreview } from "@site/src/componentPreview/profilePreview";
@@ -30,6 +31,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Caption: captionPreview,
   Heading: headingPreview,
   Link: linkPreview,
+  Loader: loaderPreview,
   Notification: notificationPreview,
   Paragraph: paragraphPreview,
   Profile: profilePreview,

@stellar/design-system/src/components/Loader/index.tsx

@@ -1,10 +1,15 @@
 import React from "react";
 import "./styles.scss";
 
-interface LoaderProps {
+/** */
+export interface LoaderProps {
+  /** Set custom size of the component */
   size?: string;
 }
 
+/**
+ * Loader component color is set in CSS, and the size can also be set in CSS or through the `size` prop.
+ */
 export const Loader: React.FC<LoaderProps> = ({ size }: LoaderProps) => {
   const customStyle = {
     ...(size ? { "--Loader-size": size } : {}),