Merge pull request #45 from babylonlabs-io/feat-loader

feat: loader

.changeset/bright-icons-wait.md

@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": minor
+---
+
+add loader

src/components/Loader/Loader.css

@@ -0,0 +1,35 @@
+@keyframes bbn-loader-stroke-animation {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+  to {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+}
+
+@keyframes bbn-loader-rotate-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.bbn-loader {
+  display: inline-block;
+  animation: 1.4s linear 0s infinite normal none running bbn-loader-rotate-animation;
+
+  & circle {
+    animation: bbn-loader-stroke-animation 1.4s ease-in-out infinite;
+    stroke: currentColor;
+    stroke-dasharray: 80px, 200px;
+    stroke-dashoffset: 0;
+  }
+}

src/components/Loader/Loader.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Loader } from "./Loader";
+
+const meta: Meta<typeof Loader> = {
+  component: Loader,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    className: "text-secondary-main",
+  },
+};

src/components/Loader/Loader.tsx

@@ -0,0 +1,17 @@
+import { twMerge } from "tailwind-merge";
+import "./Loader.css";
+
+interface LoaderProps {
+  className?: string;
+  size?: number;
+}
+
+export function Loader({ size = 40, className }: LoaderProps) {
+  return (
+    <span className={twMerge("bbn-loader text-current", className)} style={{ width: size, height: size }}>
+      <svg viewBox="22 22 44 44">
+        <circle cx="44" cy="44" r="20.2" fill="none" stroke="currentColor" stroke-width="3.6" />
+      </svg>
+    </span>
+  );
+}

src/components/Loader/index.ts

@@ -0,0 +1 @@
+export * from "./Loader";

src/index.tsx

@@ -9,5 +9,6 @@ export * from "./components/Input";
 export * from "./components/Dialog";
 export * from "./components/Chip";
 export * from "./components/Portal";
+export * from "./components/Loader";
 
 export { ScrollLocker } from "@/context/Dialog.context";