Radial Progressbar

A basic widget for showing the work progress.

import { RadialProgressBar } from "rizzui";

Default

The default style of RadialProgressBar.

import { RadialProgressBar } from "rizzui";

export default function App() {
  return <RadialProgressBar value={75} />;
}

With Sizes and Colors

The RadialProgressBar width height and color can be changed with property size & trackColor & progressColor.

import { RadialProgressBar } from "rizzui";

const data = [
  {
    size: 80,
    trackColor: "#F7EEFF",
    progressColor: "#7928ca",
  },
  {
    size: 100,
    trackColor: "#EBFEF8",
    progressColor: "#10b981",
  },
  {
    size: 120,
    trackColor: "#FFEEF2",
    progressColor: "#f1416c",
  },
];

export default function App() {
  return (
    <>
      {data.map((item, index) => (
        <RadialProgressBar
          key={index}
          value={70}
          size={item.size}
          trackColor={item.trackColor}
          progressColor={item.progressColor}
        />
      ))}
    </>
  );
}

With Bar Width

The ProgressBar width of RadialProgressBar can be changed with property progressbarWidth.

import { RadialProgressBar } from "rizzui";

export default function App() {
  return (
    <>
      <RadialProgressBar
        value={70}
        progressbarWidth={5}
      />
    </>
  );
}

With Gradient Color

You can set gradient colors to the RadialProgressBar with property gradientColor.

Note: For multiple gradient progressbar, you have to pass unique id to prop gradientId.

import { RadialProgressBar } from "rizzui";

export default function App() {
  return (
    <RadialProgressBar
      value={70}
      size={140}
      progressbarWidth={12}
      trackColor={"#F7EEFF"}
      progressColor={"#7928ca"}
      gradientColor={"#3872FA"}
      gradientId={"uniqueId"}
    />
  );
}

With Start Positions

The ProgressBar start position can be changed with property startAngle.

70%

import { RadialProgressBar } from "rizzui";

export default function App() {
  const value = 70;
  return (
    <div className="relative">
      <RadialProgressBar
        size={120}
        value={value}
        startAngle={45}
      />
      <span className="absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-lg font-semibold">
        {value}%
      </span>
    </div>
  );
}

API Reference