Circular Progress Indicator with Color Gradient

Build a React component that displays a circular progress indicator with a smooth color gradient that transitions around the circle's perimeter.

Requirements

Create a GradientProgress component that:

1. Displays a circular progress indicator that fills clockwise
2. Shows the current progress percentage (0-100) with a radial color gradient that transitions around the circle's perimeter
3. The gradient should use these color stops:
   • 0%: green
   • 99%: red
   • 100%: blue
4. Uses a stroke width of 10 pixels
5. The background rail (unfilled portion) should be a light gray color (#D9D9D9)

Component Interface

interface GradientProgressProps {
  percent: number;  // Progress value from 0 to 100
}

export function GradientProgress(props: GradientProgressProps): JSX.Element;

Test Cases

• Renders a circular progress at 0% showing no progress @test
• Renders a circular progress at 50% with visible gradient @test
• Renders a circular progress at 100% with full gradient visible @test

Implementation

@generates

Dependencies { .dependencies }

@rc-component/progress { .dependency }

Provides React progress UI components with support for circular progress indicators and gradient rendering.

This package should be installed as a dependency (not devDependency).