---
sidebar_position: 4
---

import { RadialProgressBar } from "rizzui";
import { RadialProgressbarColors } from "@site/src/components/radial-progressbar";
import Paper from "@site/src/components/paper";

# Radial Progressbar

A basic widget for showing the work progress.

```tsx
"use client";

import { RadialProgressBar } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **RadialProgressBar**.

<Paper>
  <RadialProgressBar value={75} />
</Paper>

```tsx
"use client";

import { RadialProgressBar } from "rizzui";

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

<div className="mb-20" />

## With Sizes and Colors

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

<Paper className="flex-row gap-10 flex-wrap justify-evenly">
  <RadialProgressbarColors />
</Paper>

```tsx
"use client";

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}
        />
      ))}
    </>
  );
}
```

<div className="mb-20" />

## With Bar Width

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

<Paper className="flex-row gap-10 flex-wrap justify-evenly">
  <RadialProgressBar
    value={70}
    size={120}
    progressbarWidth={5}
  />
</Paper>

```tsx
"use client";

import { RadialProgressBar } from "rizzui";

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

<div className="mb-20" />

## 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**.

<Paper className="flex-row gap-10 flex-wrap justify-evenly">
  <RadialProgressBar
    value={70}
    size={140}
    progressbarWidth={12}
    trackColor={"#F7EEFF"}
    progressColor={"#7928ca"}
    gradientColor={"#3872FA"}
    gradientId={"uniqueId"}
  />
</Paper>

```tsx
"use client";

import { RadialProgressBar } from "rizzui";

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

<div className="mb-20" />

## With Start Positions

The ProgressBar start position can be changed with property **startAngle**.

<Paper className="flex-row gap-10 flex-wrap justify-evenly">
  <div className="relative">
    <RadialProgressBar
      value={70}
      size={120}
      startAngle={45}
    />
    <span className="absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-lg font-semibold">
      70%
    </span>
  </div>
</Paper>

```tsx
"use client";

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>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### RadialProgressBar Props

Here is the API documentation of the RadialProgressBar component.

<div className="overflow-x-auto">

|        Props         |                   Type                   |                        Description                        |  Default  |
| :------------------: | :--------------------------------------: | :-------------------------------------------------------: | :-------: |
|        value         |                 `number`                 |                 Percentage of filled bar                  |   \_\_    |
|         size         |                 `number`                 |    Width and Height of the RadialProgressBar component    |   `100`   |
|      trackColor      |                 `string`                 |        Color of the track of the RadialProgressBar        | `#f0f0f0` |
|    progressColor     |                 `string`                 |      Color of the progress of the RadialProgressBar       | `#111111` |
|   progressbarWidth   |                 `number`                 |                 Width of the progress bar                 |    `8`    |
|    gradientColor     |                 `string`                 |  Gradient color of the progress of the RadialProgressBar  |   \_\_    |
|      gradientId      |                 `string`                 |           Unique id for the gradient color stop           |   \_\_    |
|      startAngle      | [StartAngles](#progressbar-start-angles) |           Start angle of the RadialProgressBar            |   `90`    |
|    trackClassName    |                 `string`                 |  Overrides the default style of RadialProgressBar track   |   \_\_    |
| progressBarClassName |                 `string`                 | Overrides the default style of RadialProgressBar progress |   \_\_    |
| useParentResponsive  |                `boolean`                 |  Uses the parent components width height for responsive   |  `false`  |

</div>

<div className="mb-10" />

### Progressbar Start Angles

```ts
type ProgressbarStartAngles = 0 | 45 | 90 | 180 | 270 | 360;
```
