Progress

1"use client";
2 
3import { Progress as ProgressPrimitive } from "radix-ui";
4import { useEffect } from "react";
5import type * as React from "react";
6 
7import { cn } from "@/lib/utils";
8 
9const PROGRESS_STYLE_ID = "progress-indeterminate-styles";
10 
11//  bar is 50% width, slides from left -40% to 100%
12const indeterminateKeyframes = `@keyframes progressIndeterminate{0%{left:-40%}100%{left:100%}}`;
13 
14function useProgressStyles(needed: boolean | undefined) {
15  useEffect(() => {
16    if (!needed || document.getElementById(PROGRESS_STYLE_ID)) return;
17    const style = document.createElement("style");
18    style.id = PROGRESS_STYLE_ID;
19    style.textContent = indeterminateKeyframes;
20    document.head.appendChild(style);
21  }, [needed]);
22}
23 
24interface ProgressProps
25  extends React.ComponentProps<typeof ProgressPrimitive.Root> {
26  variant?: "default" | "indeterminate";
27  isIndeterminate?: boolean;
28}
29 
30function Progress({
31  className,
32  value,
33  variant,
34  isIndeterminate,
35  ...props
36}: ProgressProps) {
37  const indeterminate = variant === "indeterminate" || isIndeterminate;
38  useProgressStyles(indeterminate);
39 
40  return (
41    <ProgressPrimitive.Root
42      data-slot="progress"
43      data-indeterminate={indeterminate ? "" : undefined}
44      aria-label={indeterminate ? "Progress" : `Progress: ${value ?? 0}%`}
45      className={cn(
46        "relative h-2 w-full overflow-hidden rounded-full bg-neutral-bg",
47        className,
48      )}
49      {...props}
50    >
51      <ProgressPrimitive.Indicator
52        data-slot="progress-indicator"
53        className={cn(
54          "h-full rounded-full transition-all",
55          indeterminate
56            ? "absolute min-w-[50%] w-[50%] bg-primary"
57            : "flex-1 w-full bg-primary",
58        )}
59        style={
60          indeterminate
61            ? { animation: "progressIndeterminate 1.5s ease infinite" }
62            : { transform: `translateX(-${100 - (value ?? 0)}%)` }
63        }
64      />
65    </ProgressPrimitive.Root>
66  );
67}
68 
69export { Progress, type ProgressProps };