Radial Progressbar

A basic widget for showing the work progress.

'use client';

import { RadialProgressBar } from '@somaui/ui/radial-progressbar';

Default

The default style of RadialProgressBar.

'use client';

import { RadialProgressBar } from '@somaui/ui/radial-progressbar';

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.

'use client';

import { RadialProgressBar } from '@somaui/ui/radial-progressbar';

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.

'use client';

import { RadialProgressBar } from '@somaui/ui/radial-progressbar';

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.

'use client';

import { RadialProgressBar } from '@somaui/ui/radial-progressbar';

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%

'use client';

import { RadialProgressBar } from '@somaui/ui/radial-progressbar';

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