antd
Version:
An enterprise-class UI design language and React components implementation
30 lines (29 loc) • 1.05 kB
JavaScript
"use client";
import * as React from 'react';
import { clsx } from 'clsx';
export default function ProgressIcon(props) {
const {
prefixCls,
children,
percent
} = props;
const progressCls = `${prefixCls}-item-progress-icon`;
const circleCls = `${progressCls}-circle`;
const dashArray = `calc(var(--progress-r) * 2 * ${Math.PI * percent / 100}) 9999`;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
className: `${progressCls}-svg`,
viewBox: "0 0 100 100",
width: "100%",
height: "100%",
xmlns: "http://www.w3.org/2000/svg",
"aria-valuemax": 100,
"aria-valuemin": 0,
"aria-valuenow": percent
}, /*#__PURE__*/React.createElement("title", null, "Progress"), /*#__PURE__*/React.createElement("circle", {
className: clsx(circleCls, `${circleCls}-rail`)
}), /*#__PURE__*/React.createElement("circle", {
className: clsx(circleCls, `${circleCls}-ptg`),
strokeDasharray: dashArray,
transform: "rotate(-90 50 50)"
})), children);
}