0.0.269 - feat: add indeterminate to progress

risc0 · Jan 8, 2025 · 7e3e571 · 7e3e571
1 parent 85f47d9
commit 7e3e571
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -18,4 +18,4 @@ https://www.npmjs.com/package/@risc0/ui
 
 | Statements                  | Branches                | Functions                 | Lines             |
 | --------------------------- | ----------------------- | ------------------------- | ----------------- |
-| ![Statements](https://img.shields.io/badge/statements-41.76%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-79.71%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-73.8%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-41.76%25-red.svg?style=flat) |
+| ![Statements](https://img.shields.io/badge/statements-41.95%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-78.57%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-73.8%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-41.95%25-red.svg?style=flat) |
diff --git a/config/tailwind.config.base.ts b/config/tailwind.config.base.ts
@@ -106,16 +106,46 @@ const config = {
           "43.5%": { transform: "translateX(2px) rotateY(3deg)" },
           "50%": { transform: "translateX(0)" },
         },
+        indeterminate1: {
+          "0%": {
+            left: "-35%",
+            right: "100%",
+          },
+          "60%": {
+            left: "100%",
+            right: "-90%",
+          },
+          "100%": {
+            left: "100%",
+            right: "-90%",
+          },
+        },
+        indeterminate2: {
+          "0%": {
+            left: "-200%",
+            right: "100%",
+          },
+          "60%": {
+            left: "100%",
+            right: "-8%",
+          },
+          "100%": {
+            left: "100%",
+            right: "-8%",
+          },
+        },
       },
       animation: {
-        "fade-in": "fade-in 1s ease-in-out",
-        "fade-in-up": "fade-in-up 1s ease-in-out",
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
         "fade-in-down": "fade-in-down 1s ease-in-out",
         "fade-in-left": "fade-in-left 1s ease-in-out",
         "fade-in-right": "fade-in-right 1s ease-in-out",
+        "fade-in-up": "fade-in-up 1s ease-in-out",
+        "fade-in": "fade-in 1s ease-in-out",
         "head-shake": "head-shake 1s ease-in-out",
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        indeterminate1: "indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite",
+        indeterminate2: "indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite",
         tilt: "tilt 10s linear infinite",
       },
     },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@risc0/ui",
-  "version": "0.0.268",
+  "version": "0.0.269",
   "private": false,
   "sideEffects": false,
   "type": "module",

diff --git a/progress.tsx b/progress.tsx
@@ -13,10 +13,17 @@ const Progress = forwardRef<
     className={cn("relative h-1 w-full overflow-hidden rounded-full bg-primary/20", className)}
     {...rest}
   >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 rounded-full bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
+    {value != null ? (
+      <ProgressPrimitive.Indicator
+        className="h-full w-full flex-1 rounded-full bg-primary transition-transform duration-500 ease-in-out"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    ) : (
+      <>
+        <ProgressPrimitive.Indicator className="absolute h-full w-auto animate-indeterminate1 rounded-full bg-primary" />
+        <ProgressPrimitive.Indicator className="absolute h-full w-auto animate-indeterminate2 rounded-full bg-primary" />
+      </>
+    )}
   </ProgressPrimitive.Root>
 ));
 

diff --git a/stories/progress.stories.tsx b/stories/progress.stories.tsx
@@ -5,3 +5,7 @@ import { Progress } from "../progress";
 export function Default() {
   return <Progress value={33} />;
 }
+
+export function Indeterminate() {
+  return <Progress />;
+}