Glass Progress

1"use client"
2 
3import * as React from "react"
4import * as ProgressPrimitive from "@radix-ui/react-progress"
5import { cn } from "@/lib/utils"
6 
7const GlassProgress = React.forwardRef<
8  React.ElementRef<typeof ProgressPrimitive.Root>,
9  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
10>(({ className, value, ...props }, ref) => (
11  <div className="relative">
12    <div className="absolute -inset-1 rounded-full bg-linear-to-r from-cyan-500/20 via-blue-500/20 to-purple-500/20 blur-md opacity-50" />
13    <ProgressPrimitive.Root
14      ref={ref}
15      className={cn(
16        "relative h-3 w-full overflow-hidden rounded-full",
17        "bg-white/10 backdrop-blur-xl border border-white/20",
18        className,
19      )}
20      {...props}
21    >
22      <ProgressPrimitive.Indicator
23        className={cn(
24          "h-full transition-all duration-500 ease-out rounded-full",
25          "bg-linear-to-r from-cyan-400 via-blue-400 to-purple-400",
26          "shadow-[0_0_12px_rgba(59,130,246,0.5)]",
27        )}
28        style={{ width: `${value || 0}%` }}
29      />
30    </ProgressPrimitive.Root>
31  </div>
32))
33GlassProgress.displayName = ProgressPrimitive.Root.displayName
34 
35export { GlassProgress }