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.

This commit is contained in:
Ben Allfree
2026-04-10 17:49:07 -07:00
parent d131b81374
commit a298086999
2 changed files with 45 additions and 2 deletions
+44 -1
View File
@@ -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%;
}
}
+1 -1
View File
@@ -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}%` }}
/>
) : (