Kendo React Circular progress-bar

Question

I'm using Kendo React for one of my project and I was wondering if Kendo React library offers Circular Progress Bar. I was able to find linear but not circular?

Answer 1

You can use their circular gauge

DEMO

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"));