Progress

1"use client"
2 
3import * as React from "react"
4import * as ProgressPrimitive from "@radix-ui/react-progress"
5 
6import { cn } from "@/lib/utils"
7 
8function Progress({
9  className,
10  value,
11  ...props
12}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
13  return (
14    <ProgressPrimitive.Root
15      data-slot="progress"
16      className={cn(
17        "relative h-3.5 w-full overflow-hidden rounded-full bg-[#d7dbe2] shadow-[inset_0_1px_3px_rgba(0,0,0,0.25)]",
18        className
19      )}
20      {...props}
21    >
22      <ProgressPrimitive.Indicator
23        data-slot="progress-indicator"
24        className="h-full rounded-full bg-[linear-gradient(180deg,var(--aqua-gel-hi,#a5d0fa)_0%,var(--aqua-gel-mid,#4a95ef)_50%,var(--aqua-accent,#2f7de0)_55%,var(--aqua-gel-light,#6fb4f7)_100%)] shadow-[inset_0_1px_1px_rgba(255,255,255,0.7)] transition-transform duration-300 after:absolute after:inset-0 after:animate-[aqua-progress-stripes_0.8s_linear_infinite] after:bg-[repeating-linear-gradient(135deg,rgba(255,255,255,0.35)_0px,rgba(255,255,255,0.35)_7px,transparent_7px,transparent_14px)] after:content-[''] motion-reduce:after:animate-none"
25        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
26      />
27    </ProgressPrimitive.Root>
28  )
29}
30 
31export { Progress }