RadiantProgressBar

A beautiful, customizable circular progress bar component for React with gradient support, smooth animations, and full TypeScript support.

Features

• 🎨 Customizable Gradients - Single color, 2-color, or 3-color gradients
• 🔄 Smooth Animations - Configurable animation speed
• 📐 Flexible Sizing - Any size with responsive support
• 🎯 TypeScript First - Full type definitions included
• ⚡ Lightweight - Minimal dependencies
• 🎭 Direction Control - Clockwise or counterclockwise animation
• 🎪 Custom Content - Render anything inside the progress bar
• 🎨 Tailwind Support - Easy styling with Tailwind CSS classes

Installation

npm install radiant-progress-bar

yarn add radiant-progress-bar

pnpm add radiant-progress-bar

Usage

Basic Example

import { RadiantProgressBar } from 'radiant-progress-bar';

function App() {
  return (
    <RadiantProgressBar
      percentage={75}
      barGradients={['#3b82f6', '#ef4444']}
    />
  );
}

With Custom Content

<RadiantProgressBar
  percentage={85}
  barGradients={['#10b981', '#06b6d4']}
>
  {(count) => (
    <div>
      <span className='text-2xl font-bold'>{count}</span>
      <span className='text-xs'>percent</span>
    </div>
  )}
</RadiantProgressBar>

Counterclockwise Direction

<RadiantProgressBar
  percentage={75}
  barGradients={['#10b981', '#3b82f6']}
  direction='counterclockwise'
/>

Custom Size

<RadiantProgressBar
  percentage={60}
  size={200}
  barGradients={['#ec4899', '#8b5cf6']}
/>

Hide Count Display

<RadiantProgressBar
  percentage={68}
  barGradients={['#06b6d4', '#8b5cf6']}
  showCount={false}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | percentage | number | Required | Progress value (0-100) | | barGradients | string[] | ['red', 'green'] | Array of 1-3 colors for gradient | | barColor | string | - | Single solid color (overrides gradients) | | pathColor | string | '#ffffff00' | Color of unfilled portion | | innerColor | string | 'white' | Background color of the inner circle | | size | number | 144 | Size in pixels | | speed | number | 25 | Animation speed in milliseconds per increment | | showCount | boolean | true | Show/hide percentage text | | direction | 'clockwise' \| 'counterclockwise' | 'clockwise' | Animation direction | | children | ReactNode \| ((count: number) => ReactNode) | - | Custom content | | className | string | - | Additional CSS classes | | style | CSSProperties \| ((count: number) => CSSProperties) | - | Custom styles | | onClick | () => void | - | Click handler |

All standard HTML div attributes are also supported.

Advanced Examples

Custom Inner Circle Gradient

<RadiantProgressBar
  percentage={82}
  barGradients={['#f59e0b', '#ef4444']}
  className='before:bg-gradient-to-br before:from-gray-900 before:to-black'
/>

Custom Inner Circle Size

<RadiantProgressBar
  percentage={85}
  barGradients={['#f59e0b', '#ec4899']}
  className="before:size-[90%]"
/>

Dynamic Styles

<RadiantProgressBar
  percentage={88}
  barGradients={['#a855f7', '#ec4899']}
  style={(count) => ({
    boxShadow: `0 0 ${count / 2}px rgba(168, 85, 247, 0.8)`,
    transform: `scale(${1 + count / 500})`
  })}
>
  {(count) => <span>{count}%</span>}
</RadiantProgressBar>

Different Animation Speeds

// Fast animation (5ms)
<RadiantProgressBar
  percentage={45}
  speed={5}
  barGradients={['#f59e0b', '#eab308']}
/>

// Slow animation (50ms)
<RadiantProgressBar
  percentage={55}
  speed={50}
  barGradients={['#84cc16', '#22c55e']}
/>

Styling with Tailwind

You can customize the appearance using Tailwind CSS classes:

<RadiantProgressBar
  percentage={92}
  barGradients={['#fbbf24', '#f59e0b']}
  className='shadow-2xl shadow-yellow-500/50 hover:scale-110 transition-transform cursor-pointer'
  onClick={() => console.log('Clicked!')}
/>

Available Tailwind Class Overrides

• before:size-* - Inner circle size
• before:bg-* - Inner circle background
• before:w-* / before:h-* - Inner circle width/height
• Any standard Tailwind utility classes

TypeScript

Full TypeScript support with exported types:

import { RadiantProgressBar, RadiantProgressBarProps } from 'radiant-progress-bar';

const props: RadiantProgressBarProps = {
  percentage: 75,
  barGradients: ['#3b82f6', '#ef4444'],
  size: 144,
};

<RadiantProgressBar {...props} />

Examples

GitHub Repository

Requirements

• React >= 18.0.0

Optional:

• Tailwind CSS (only if you want to use Tailwind utilities in the className prop for advanced customization)

License

MIT

Author

Shibin

Repository

GitHub Repository