From c1d597b536d1105555f68ce226baa4735b48f739 Mon Sep 17 00:00:00 2001 From: Ghina Al Rashwani Date: Wed, 15 Oct 2025 21:17:48 +0300 Subject: [PATCH 1/2] ginar/ issue #678 enhancing progress bar look --- app/globals.css | 47 +++++++++++++++++++++++++++++++++- components/RadialProgress.tsx | 48 +++++++++++++++++++++++++++++++---- components/ui/progress.tsx | 33 ++++++++++++++++++------ tailwind.config.js | 4 +-- 4 files changed, 116 insertions(+), 16 deletions(-) diff --git a/app/globals.css b/app/globals.css index ad472c124..5e36604fc 100644 --- a/app/globals.css +++ b/app/globals.css @@ -75,4 +75,49 @@ body { @apply bg-background text-foreground; } -} \ No newline at end of file +} +/* --- Smooth infinite stripe animation --- */ +@keyframes stripes-slide { + 0% { + background-position: 0 0; + } + 100% { + background-position: 120px 0; /* horizontal smooth motion */ + } +} + +/* Animation utility */ +.animate-stripes-slide { + animation: stripes-slide 1.8s linear infinite; +} + +/* Stripe pattern (clean and modern look) */ +.stripe-pattern { + background-image: repeating-linear-gradient( + 35deg, /* flatter angle = rod-like effect */ + rgba(255, 255, 255, 0.15) 0px, + rgba(255, 255, 255, 0.15) 60px, + transparent 60px, + transparent 120px + ); + background-size: 120px 120px; /* consistent spacing for smooth flow */ +} +/* Smooth diagonal stripe animation for circular progress bars */ +@keyframes diagonal-stripes { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(40px); + } +} + +.animate-diagonal-stripes { + animation: diagonal-stripes 1.8s linear infinite; +} + +.animated-stripes-circle { + mix-blend-mode: overlay; + pointer-events: none; +} + diff --git a/components/RadialProgress.tsx b/components/RadialProgress.tsx index e8bc3df48..386b88a9a 100644 --- a/components/RadialProgress.tsx +++ b/components/RadialProgress.tsx @@ -1,5 +1,3 @@ -// /components/ui/RadialProgress.tsx - import React from "react"; import { cn } from "@/lib/utils"; import { @@ -38,6 +36,7 @@ const RadialProgress: React.FC = ({ >
+ {/* Background circle */} = ({ cx={size / 2} cy={size / 2} /> + + {/* Main solid progress color */} = ({ cx={size / 2} cy={size / 2} /> + + {/* Animated diagonal stripe overlay */} + + + {/* Define animated pattern */} + + + + + + + {/* Center text */}
{percentage.toFixed(2)}%
-

{label}

+ + {/* Label */} +

+ {label} +

); - // If tooltipContent is provided, wrap the element in a tooltip if (tooltipContent) { return ( @@ -85,4 +123,4 @@ const RadialProgress: React.FC = ({ return progressElement; }; -export default RadialProgress; \ No newline at end of file +export default RadialProgress; diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx index cee982f28..77ed87027 100644 --- a/components/ui/progress.tsx +++ b/components/ui/progress.tsx @@ -1,34 +1,51 @@ import * as React from "react"; import * as ProgressPrimitive from "@radix-ui/react-progress"; - import { cn } from "@/lib/utils"; +import "@/app/globals.css"; const Progress = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef + React.ComponentPropsWithoutRef & { color?: string } >(({ className, value, color, ...props }, ref) => { + const safeValue = value ?? 0; + + console.log("Progress rendered", safeValue, color); + return ( + {/* Percentage label */}
- {`${value}%`} + {`${safeValue}%`}
+ + {/* Filled bar */} + > + {/* Animated stripes (shape preserved) */} +
+ ); }); -Progress.displayName = ProgressPrimitive.Root.displayName; +Progress.displayName = ProgressPrimitive.Root.displayName; export { Progress }; diff --git a/tailwind.config.js b/tailwind.config.js index d2b9f803b..36861cb95 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -62,8 +62,8 @@ module.exports = { "explorer-light-gray": "var(--color-light-gray)", "explorer-dark-gray": "var(--color-dark-gray)", "explorer-extra-light-gray": "var(--color-extra-light-gray)", - "explorer-slate":"var(--color-slate)", - "explorer-slate-text":"var(--color-slate-text)", + "explorer-slate": "var(--color-slate)", + "explorer-slate-text": "var(--color-slate-text)", border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", -- GitLab From 83e576fc01f32c419cfc799f743c4b43e2112085 Mon Sep 17 00:00:00 2001 From: Ghina Al Rashwani Date: Thu, 16 Oct 2025 10:38:36 +0300 Subject: [PATCH 2/2] fixing animation and styles --- app/globals.css | 47 +---------------------------------- components/RadialProgress.tsx | 46 ++++++++++++++++------------------ components/ui/progress.tsx | 38 +++++++++++----------------- styles/striped-progress.css | 32 ++++++++++++++++++++++++ 4 files changed, 70 insertions(+), 93 deletions(-) create mode 100644 styles/striped-progress.css diff --git a/app/globals.css b/app/globals.css index 5e36604fc..ad472c124 100644 --- a/app/globals.css +++ b/app/globals.css @@ -75,49 +75,4 @@ body { @apply bg-background text-foreground; } -} -/* --- Smooth infinite stripe animation --- */ -@keyframes stripes-slide { - 0% { - background-position: 0 0; - } - 100% { - background-position: 120px 0; /* horizontal smooth motion */ - } -} - -/* Animation utility */ -.animate-stripes-slide { - animation: stripes-slide 1.8s linear infinite; -} - -/* Stripe pattern (clean and modern look) */ -.stripe-pattern { - background-image: repeating-linear-gradient( - 35deg, /* flatter angle = rod-like effect */ - rgba(255, 255, 255, 0.15) 0px, - rgba(255, 255, 255, 0.15) 60px, - transparent 60px, - transparent 120px - ); - background-size: 120px 120px; /* consistent spacing for smooth flow */ -} -/* Smooth diagonal stripe animation for circular progress bars */ -@keyframes diagonal-stripes { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(40px); - } -} - -.animate-diagonal-stripes { - animation: diagonal-stripes 1.8s linear infinite; -} - -.animated-stripes-circle { - mix-blend-mode: overlay; - pointer-events: none; -} - +} \ No newline at end of file diff --git a/components/RadialProgress.tsx b/components/RadialProgress.tsx index 386b88a9a..6dea7caf5 100644 --- a/components/RadialProgress.tsx +++ b/components/RadialProgress.tsx @@ -1,3 +1,5 @@ +// /components/ui/RadialProgress.tsx + import React from "react"; import { cn } from "@/lib/utils"; import { @@ -6,6 +8,7 @@ import { TooltipTrigger, TooltipContent, } from "@/components/ui/hybrid-tooltip"; +import "@/styles/striped-progress.css"; // import the animation CSS interface RadialProgressProps { percentage: number; @@ -36,7 +39,7 @@ const RadialProgress: React.FC = ({ >
- {/* Background circle */} + {/* Background Circle */} = ({ cy={size / 2} /> - {/* Main solid progress color */} + {/* Solid Progress Circle */} = ({ cy={size / 2} /> - {/* Animated diagonal stripe overlay */} + {/* Striped Overlay */} + + + + + + = ({ cx={size / 2} cy={size / 2} /> - - {/* Define animated pattern */} - - - - - - {/* Center text */} + {/* Center Percentage */}
{percentage.toFixed(2)}% @@ -109,6 +106,7 @@ const RadialProgress: React.FC = ({
); + // Wrap in tooltip if provided if (tooltipContent) { return ( diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx index 77ed87027..2ed5039c8 100644 --- a/components/ui/progress.tsx +++ b/components/ui/progress.tsx @@ -1,51 +1,43 @@ import * as React from "react"; import * as ProgressPrimitive from "@radix-ui/react-progress"; import { cn } from "@/lib/utils"; -import "@/app/globals.css"; +import "@/styles/striped-progress.css"; // animation file const Progress = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef & { color?: string } + React.ComponentPropsWithoutRef >(({ className, value, color, ...props }, ref) => { - const safeValue = value ?? 0; - - console.log("Progress rendered", safeValue, color); - return ( - {/* Percentage label */} + {/* Percentage Label */}
- {`${safeValue}%`} + {`${value}%`}
- {/* Filled bar */} + {/* Progress Indicator with Animated Diagonal Stripes */} - {/* Animated stripes (shape preserved) */} -
- + /> ); }); Progress.displayName = ProgressPrimitive.Root.displayName; + export { Progress }; diff --git a/styles/striped-progress.css b/styles/striped-progress.css new file mode 100644 index 000000000..28d204c7d --- /dev/null +++ b/styles/striped-progress.css @@ -0,0 +1,32 @@ +/* /styles/striped-progress.css */ + +/* Keyframes for moving diagonal stripes */ +@keyframes moveStripes { + 0% { + background-position: 0 0; + } + 100% { + background-position: 40px 0; + } +} + +/* Class to apply animated stripes */ +.animated-stripes { + background-image: repeating-linear-gradient( + 45deg, + rgba(255, 255, 255, 0.25) 0 10px, + transparent 10px 20px + ); + background-size: 40px 40px; + animation: moveStripes 1s linear infinite; + background-blend-mode: overlay; +} +/* Circular stripes rules */ +@keyframes circularStripesMove { + 0% { transform: translateX(0); } + 100% { transform: translateX(40px); } +} + +.circular-animated-stripes rect { + animation: circularStripesMove 1s linear infinite; +} -- GitLab