Progress Bar Customizer

Create a React component that renders customizable progress indicators with various styling configurations.

@generates

Requirements

Basic Configuration

Build a component that displays progress bars with configurable appearance:

• Create a function renderLineProgress(percent: number, options: LineOptions) that returns a React element displaying a linear progress bar with the specified percentage and styling options
• Create a function renderCircleProgress(percent: number, options: CircleOptions) that returns a React element displaying a circular progress bar with the specified percentage and styling options

The LineOptions interface should include:

• width: thickness of the progress line
• color: color of the progress indicator
• backgroundColor: color of the background track
• lineEnd: style of line endings ('rounded', 'flat', or 'extended')

The CircleOptions interface should include:

• width: thickness of the progress stroke
• color: color of the progress indicator
• backgroundColor: color of the background track

Multi-Color Progress

• The renderLineProgress function should support displaying multiple progress segments when percent is an array of numbers and color is an array of color strings
• Each segment should be rendered with its corresponding color from the array

Gradient Styling

• The renderCircleProgress function should support gradient colors when the color option is an object with percentage keys (e.g., { "0%": "#ff0000", "100%": "#00ff00" })
• The gradient should transition smoothly from the start color to the end color

Test Cases

• Rendering a line progress bar at 50% with blue color, 4px width, and gray background displays correctly @test
• Rendering a circle progress bar at 75% with green color, 6px width, and light gray background displays correctly @test
• A line progress with multiple segments [30, 20, 15] and colors ["red", "green", "blue"] renders three colored segments @test
• A circle progress bar with gradient color object from blue to green renders with smooth color transition @test

API

interface LineOptions {
  width: number;
  color: string | string[];
  backgroundColor: string;
  lineEnd: 'rounded' | 'flat' | 'extended';
}

interface CircleOptions {
  width: number;
  color: string | { [key: string]: string };
  backgroundColor: string;
}

export function renderLineProgress(
  percent: number | number[],
  options: LineOptions
): React.ReactElement;

export function renderCircleProgress(
  percent: number,
  options: CircleOptions
): React.ReactElement;

Dependencies { .dependencies }

rc-progress { .dependency }

Provides React progress bar components with customizable styling.