@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
50 lines (49 loc) • 2 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import { useLayoutEffect, useRef } from "react";
const ProgressCircular = ({ progress, size, status = "info", animated = false, className, children })=>{
const pathRef = useRef(null);
useLayoutEffect(()=>{
if (!pathRef.current) return;
const length = pathRef.current.getTotalLength();
const value = progress;
const to = (100 - value) / 100 * length;
pathRef.current.getBoundingClientRect();
pathRef.current.style.strokeDashoffset = `${Math.max(0, to)}`;
}, [
progress
]);
return /*#__PURE__*/ jsxs("div", {
className: classnames(`cobalt-circularProgressBar cobalt-circularProgressBar--size${size}`, className, {
"cobalt-circularProgressBar--animated": animated,
[`cobalt-circularProgressBar--${status}`]: status
}),
children: [
/*#__PURE__*/ jsx("div", {
className: "cobalt-circularProgressBar__content",
children: children
}),
/*#__PURE__*/ jsxs("svg", {
viewBox: "0 0 100 100",
xmlns: "http://www.w3.org/2000/svg",
preserveAspectRatio: "none",
children: [
/*#__PURE__*/ jsx("title", {
children: children
}),
/*#__PURE__*/ jsx("path", {
ref: pathRef,
className: "cobalt-circularProgressBar__bar",
d: "M5,50a45,45 0 1,0 90,0a45,45 0 1,0 -90,0",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeDashoffset: "282.78302001953125",
strokeDasharray: "282.78302001953125"
})
]
})
]
});
};
export { ProgressCircular };
//# sourceMappingURL=index.js.map