CircleProgress.js

import { useEffect, useRef } from "react";

// Render an SVG Circle Progress set to the provided progress percentage.
export const CircleProgress = ({ progress = 0 }) => {
  const pieElement = useRef(null);

  // Update SVG every time the progress prop changes.
  useEffect(() => {
    pieElement.current.style.setProperty("--progress", progress);
  }, [progress]);

  return (
    <svg width="50" height="50" viewBox="0 0 100 100">
      <circle r="50" cx="50" cy="50" className="pie-background" />
      <circle
        ref={pieElement}
        r="25"
        cx="50"
        cy="50"
        transform="rotate(-90) translate(-100)"
        className="pie"
      />
    </svg>
  );
};