Kendo React 循环进度条

Question

我在我的一个项目中使用 Kendo React，我想知道 Kendo React 库是否提供循环进度条。我能找到线性但不是圆形的？

Answer 1

你可以使用他们的圆规

演示

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGauge } from "@progress/kendo-react-gauges";
const colors = [
  {
    to: 25,
    color: "#0058e9",
  },
  {
    from: 25,
    to: 50,
    color: "#37b400",
  },
  {
    from: 50,
    to: 75,
    color: "#ffc000",
  },
  {
    from: 75,
    color: "#f31700",
  },
];
const CircularGaugeComponent = () => {
  const [value, setValue] = React.useState(0);
  React.useEffect(() => {
    setInterval(() => {
      setValue(Math.ceil(Math.random() * 100));
    }, 1000);
  }, []);
  const arcOptions = {
    value: value,
    colors,
  };
  const centerRenderer = (value, color) => {
    return (
      <h3
        style={{
          color: color,
        }}
      >
        {value}%
      </h3>
    );
  };
  return <CircularGauge {...arcOptions} centerRender={centerRenderer} />;
};
ReactDOM.render(<CircularGaugeComponent />, document.querySelector("my-app"));