client/src/components/Chat/Input/Files/ProgressCircle.tsx

export default function ProgressCircle({
  circumference,
  offset,
  circleCSSProperties,
}: {
  circumference: number;
  offset: number;
  circleCSSProperties: React.CSSProperties;
}) {
  return (
    <div className="absolute inset-0 flex items-center justify-center bg-black/5 text-white">
      <svg width="120" height="120" viewBox="0 0 120 120" className="h-6 w-6">
        <circle
          className="origin-[50%_50%] -rotate-90 stroke-gray-400"
          strokeWidth="10"
          fill="transparent"
          r="55"
          cx="60"
          cy="60"
        />
        <circle
          className="origin-[50%_50%] -rotate-90 transition-[stroke-dashoffset]"
          stroke="currentColor"
          strokeWidth="10"
          strokeDasharray={`${circumference} ${circumference}`}
          strokeDashoffset={offset}
          fill="transparent"
          r="55"
          cx="60"
          cy="60"
          style={circleCSSProperties}
        />
      </svg>
    </div>
  );
}