From e0706c7a9d9ee264329cba7f80a84966ae8d6dcc Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 3 Jul 2026 22:32:37 +0530
Subject: [PATCH] feat: progress bar packet animation when max param is missing

---
 .../progress-bar/ProgressBar.css.ts           | 26 ++++++++++++++++++-
 .../progress-bar/ProgressBar.stories.tsx      |  2 --
 src/components/progress-bar/ProgressBar.tsx   |  8 ++++--
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/progress-bar/ProgressBar.css.ts b/src/components/progress-bar/ProgressBar.css.ts
index 5fd5f1c..f2dade9 100644
--- a/src/components/progress-bar/ProgressBar.css.ts
+++ b/src/components/progress-bar/ProgressBar.css.ts
@@ -1,4 +1,4 @@
-import { ComplexStyleRule, createVar, style } from "@vanilla-extract/css";
+import { ComplexStyleRule, createVar, keyframes, style } from "@vanilla-extract/css";
 import { recipe, RecipeVariants } from "@vanilla-extract/recipes";
 import { color, config, toRem } from "../../theme";
 import { DefaultReset } from "../reset.css";
@@ -90,3 +90,27 @@ export const ProgressBarFill = style([
     height: "100%",
   },
 ]);
+
+const slidePacket = keyframes({
+  "0%": {
+    transform: "translateX(0%)",
+    width: "0%",
+  },
+  "50%": {
+    transform: "translateX(100%)",
+    width: "50%",
+  },
+  "100%": {
+    transform: "translateX(200%)",
+    width: "50%",
+  },
+});
+export const ProgressBarPacket = style([
+  DefaultReset,
+  {
+    display: "inline-block",
+    backgroundColor: "currentcolor",
+    height: "100%",
+    animation: `${slidePacket} 2s linear infinite`,
+  },
+]);
diff --git a/src/components/progress-bar/ProgressBar.stories.tsx b/src/components/progress-bar/ProgressBar.stories.tsx
index 5d69704..5820555 100644
--- a/src/components/progress-bar/ProgressBar.stories.tsx
+++ b/src/components/progress-bar/ProgressBar.stories.tsx
@@ -33,8 +33,6 @@ const Template: ComponentStory<typeof ProgressBar> = (args) => <ProgressBar {...
 export const Secondary = Template.bind({});
 Secondary.args = {
   variant: "Secondary",
-  min: 0,
-  max: 100,
   value: 26,
   outlined: false,
 };
diff --git a/src/components/progress-bar/ProgressBar.tsx b/src/components/progress-bar/ProgressBar.tsx
index 73a4a8f..f99d42d 100644
--- a/src/components/progress-bar/ProgressBar.tsx
+++ b/src/components/progress-bar/ProgressBar.tsx
@@ -8,7 +8,7 @@ import * as css from "./ProgressBar.css";
 type ProgressBarProps = {
   value: number;
   min?: number;
-  max: number;
+  max?: number;
 };
 
 export const ProgressBar = as<"span", ProgressBarProps & css.ProgressBarVariant>(
@@ -37,7 +37,11 @@ export const ProgressBar = as<"span", ProgressBarProps & css.ProgressBarVariant>
       {...props}
       ref={ref}
     >
-      <span className={css.ProgressBarFill} style={{ width: `${percent(min, max, value)}%` }} />
+      {typeof max === "number" ? (
+        <span className={css.ProgressBarFill} style={{ width: `${percent(min, max, value)}%` }} />
+      ) : (
+        <span className={css.ProgressBarPacket} />
+      )}
     </AsProgressBar>
   )
 );