From a29808699980509e45adf73a0f3b3fe8e4d98ec6 Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Fri, 10 Apr 2026 17:49:07 -0700
Subject: [PATCH] Enhance progress animations in CSS by updating the shimmer
 effect to use a linear timing function and adding a new throb animation for
 progress fill. Implement reduced motion preferences for accessibility. Update
 RepoPage component to utilize the new throb animation class for progress
 indication.

---
 src/index.css          | 45 +++++++++++++++++++++++++++++++++++++++++-
 src/pages/RepoPage.tsx |  2 +-
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/index.css b/src/index.css
index 369ebca..37bbcf8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -108,5 +108,48 @@
 
 .ci-progress-shimmer-x {
   position: absolute;
-  animation: ci-progress-shimmer-x 1.45s ease-in-out infinite;
+  animation: ci-progress-shimmer-x 1.45s linear infinite;
+}
+
+/* In-bounds motion (parent uses overflow-hidden, so box-shadow throb was clipped). */
+@keyframes ci-progress-fill-throb {
+  0% {
+    background-position: 0% 0;
+    filter: brightness(0.9) saturate(1.08);
+  }
+  50% {
+    background-position: 100% 0;
+    filter: brightness(1.14) saturate(1.12);
+  }
+  100% {
+    background-position: 0% 0;
+    filter: brightness(0.9) saturate(1.08);
+  }
+}
+
+.ci-progress-fill-throb {
+  background-image: linear-gradient(
+    90deg,
+    rgb(8 145 178),
+    rgb(4 120 87),
+    rgb(45 212 191),
+    rgb(16 185 129),
+    rgb(6 182 212),
+    rgb(8 145 178)
+  );
+  background-size: 240% 100%;
+  animation: ci-progress-fill-throb 2.2s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ci-progress-fill-throb {
+    animation: none;
+    background-size: 100% 100%;
+    filter: none;
+  }
+
+  .ci-progress-shimmer-x {
+    animation: none;
+    left: 20%;
+  }
 }
diff --git a/src/pages/RepoPage.tsx b/src/pages/RepoPage.tsx
index 11d618b..2833ee1 100644
--- a/src/pages/RepoPage.tsx
+++ b/src/pages/RepoPage.tsx
@@ -485,7 +485,7 @@ export default function RepoPage() {
                         >
                           {pct !== null ? (
                             <div
-                              className="h-full rounded-full bg-linear-to-r from-cyan-600 to-emerald-500 transition-[width] duration-500 ease-out shadow-[0_0_12px_rgba(34,211,238,0.35)]"
+                              className="ci-progress-fill-throb h-full rounded-full transition-[width] duration-500 ease-out"
                               style={{ width: `${pct}%` }}
                             />
                           ) : (