Add horizontal loading

src/components/Icon/IconCommon.tsx

@@ -56,6 +56,7 @@ import FolderOpen from "../icons/FolderOpen";
 import FolderClosed from "../icons/FolderClosed";
 import Gift from "@/components/icons/Gift";
 import Home from "@/components/icons/Home";
+import HorizontalLoading from "@/components/icons/HorizontalLoading";
 import Http from "@/components/icons/Http";
 import Integrations from "@/components/icons/Integrations";
 import LightBulb from "@/components/icons/LightBulb";
@@ -155,6 +156,7 @@ export const ICONS_MAP = {
   gift: Gift,
   history: HistoryIcon,
   home: Home,
+  "horizontal-loading": HorizontalLoading,
   http: Http,
   "info-in-circle": InfoInCircleIcon,
   information: InformationIcon,

src/components/Icon/types.ts

@@ -59,6 +59,7 @@ export type IconName =
   | "folder-open"
   | "gift"
   | "history"
+  | "horizontal-loading"
   | "home"
   | "http"
   | "info-in-circle"

src/components/icons/HorizontalLoading.tsx

@@ -0,0 +1,69 @@
+import DotsHorizontal from "./DotsHorizontal";
+import styled, { keyframes } from "styled-components";
+
+const animationCircle1 = keyframes`
+  0 {
+    r: 0;
+  }
+  30% {
+    r: 1.5;
+  }
+  60% {
+    r: 0;
+  }
+  100% {
+    r: 0;
+  }
+`;
+const animationCircle2 = keyframes`
+  0 {
+    r: 0;
+  }
+  20% {
+    r: 0;
+  }
+  40% {
+    r: 1.5;
+  }
+  80% {
+    r: 0;
+  }
+  100% {
+   r: 0
+  }
+`;
+const animationCircle3 = keyframes`
+  0 {
+    r: 0;
+  }
+  40% {
+    r: 0;
+  }
+  80% {
+    r: 1.5;
+  }
+  100% {
+   r: 0
+  }
+`;
+
+const HorizontalLoading = styled(DotsHorizontal)`
+  circle {
+    r: 0;
+    animation-name: example;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    &:nth-child(1) {
+      animation-name: ${animationCircle1};
+    }
+    &:nth-child(2) {
+      animation-name: ${animationCircle2};
+    }
+    &:nth-child(3) {
+      animation-name: ${animationCircle3};
+    }
+  }
+`;
+
+export default HorizontalLoading;