diff --git a/components/RadialProgress.tsx b/components/RadialProgress.tsx
index e8bc3df48c0678a7c1c79dd9253e9bbb4e2dde23..6dea7caf51f5a2fd4ba57b821522a6432e00747f 100644
--- a/components/RadialProgress.tsx
+++ b/components/RadialProgress.tsx
@@ -8,6 +8,7 @@ import {
   TooltipTrigger,
   TooltipContent,
 } from "@/components/ui/hybrid-tooltip";
+import "@/styles/striped-progress.css"; // import the animation CSS
 
 interface RadialProgressProps {
   percentage: number;
@@ -38,6 +39,7 @@ const RadialProgress: React.FC<RadialProgressProps> = ({
     >
       <div className="relative" style={{ width: size, height: size }}>
         <svg className="transform -rotate-90" width={size} height={size}>
+          {/* Background Circle */}
           <circle
             className="text-gray-200 dark:text-gray-700"
             stroke="currentColor"
@@ -47,6 +49,8 @@ const RadialProgress: React.FC<RadialProgressProps> = ({
             cx={size / 2}
             cy={size / 2}
           />
+
+          {/* Solid Progress Circle */}
           <circle
             className={cn("transition-all duration-500", color)}
             stroke="currentColor"
@@ -59,18 +63,50 @@ const RadialProgress: React.FC<RadialProgressProps> = ({
             cx={size / 2}
             cy={size / 2}
           />
+
+          {/* Striped Overlay */}
+          <defs>
+            <pattern
+              id="radialStripes"
+              patternUnits="userSpaceOnUse"
+              width="40"
+              height="40"
+              patternTransform="rotate(45)"
+              className="circular-animated-stripes"
+            >
+              <rect width="20" height="40" fill="rgba(255,255,255,0.25)" />
+            </pattern>
+          </defs>
+
+          <circle
+            stroke="url(#radialStripes)"
+            strokeWidth={strokeWidth}
+            strokeDasharray={circumference}
+            strokeDashoffset={offset}
+            strokeLinecap="round"
+            fill="transparent"
+            r={radius}
+            cx={size / 2}
+            cy={size / 2}
+          />
         </svg>
+
+        {/* Center Percentage */}
         <div className="absolute inset-0 flex items-center justify-center">
           <span className="text-sm font-bold text-gray-800 dark:text-white">
             {percentage.toFixed(2)}%
           </span>
         </div>
       </div>
-      <p className="text-xs text-center text-gray-500 dark:text-gray-400 uppercase tracking-wider">{label}</p>
+
+      {/* Label */}
+      <p className="text-xs text-center text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+        {label}
+      </p>
     </div>
   );
 
-  // If tooltipContent is provided, wrap the element in a tooltip
+  // Wrap in tooltip if provided
   if (tooltipContent) {
     return (
       <TooltipProvider>
@@ -85,4 +121,4 @@ const RadialProgress: React.FC<RadialProgressProps> = ({
   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 cee982f28bd379a58de82e05f973b147f1ca6522..2ed5039c8d1ff8e1a657130da4681de997476e19 100644
--- a/components/ui/progress.tsx
+++ b/components/ui/progress.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-
 import { cn } from "@/lib/utils";
+import "@/styles/striped-progress.css"; // animation file
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -16,19 +16,28 @@ const Progress = React.forwardRef<
       )}
       {...props}
     >
+      {/* Percentage Label */}
       <div className="absolute z-50 text-xs left-1/2 -translate-x-1/2 font-bold dark:drop-shadow-[0_2px_2px_rgba(0,0,0,1)]">
         {`${value}%`}
       </div>
+
+      {/* Progress Indicator with Animated Diagonal Stripes */}
       <ProgressPrimitive.Indicator
-        className={`h-full w-full flex-1 bg-primary transition-all`}
+        className={cn(
+          "h-full w-full flex-1 transition-all rounded-full animated-stripes"
+        )}
         style={{
           backgroundColor: color,
           transform: `translateX(-${100 - (value || 0)}%)`,
+          backgroundImage:
+            "repeating-linear-gradient(45deg, rgba(255,255,255,0.25) 0 10px, transparent 10px 20px)",
+          backgroundBlendMode: "overlay",
         }}
       />
     </ProgressPrimitive.Root>
   );
 });
+
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 export { Progress };
diff --git a/styles/striped-progress.css b/styles/striped-progress.css
new file mode 100644
index 0000000000000000000000000000000000000000..28d204c7d54a3acc5ce90f15212b5e34a2e7bf6b
--- /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;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index d2b9f803b5b7038dc4ce88dbd76390eb019be139..36861cb953324a8fe9344a03c38ed8b887e80532 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))",