@serendie/ui/dist/components/ProgressIndicator/AnimatedArc.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsx as A } from "react/jsx-runtime";
import n from "react";
import { describeArc as R } from "./util.js";
const h = 2.5, S = ({ className: f, radius: o, width: c }) => {
  const [t, i] = n.useState(0), s = n.useRef(null), a = n.useRef(null);
  n.useEffect(() => {
    const e = (r) => {
      s.current == null && (s.current = r);
      const u = (r - s.current) / 1e3;
      s.current = r;
      const m = u / h;
      i((p) => (p + m) % 1), a.current = requestAnimationFrame(e);
    };
    return a.current = requestAnimationFrame(e), () => {
      a.current != null && cancelAnimationFrame(a.current);
    };
  }, []);
  const { d: l, rotationDeg: d } = n.useMemo(() => {
    const e = t * Math.PI * 2, r = 180 + 40 * Math.sin(-e) + 40, u = 90 * Math.sin(e) + 90;
    return { d: R(
      o + c,
      // cx
      o + c,
      // cy
      o,
      // r
      t * 360 + u,
      t * 360 + r
    ), rotationDeg: t * 360 };
  }, [t, o, c]);
  return /* @__PURE__ */ A(
    "path",
    {
      d: l,
      transform: `rotate(${d})`,
      strokeLinecap: "butt",
      stroke: "currentColor",
      strokeWidth: c,
      fill: "none",
      className: f
    }
  );
};
export {
  S as AnimatedArc
};