Progress Dashboard with Dynamic Gradient Themes

Build a React component that displays a circular progress indicator with dynamically switchable gradient themes. The component should allow users to toggle between different visual styles at runtime.

Requirements

Component Behavior

The component should:

1. Display a circular progress indicator showing a percentage value (0-100)
2. Support three distinct theme modes: "ocean", "sunset", and "forest"
3. Allow switching between themes dynamically via a prop
4. Apply gradient color schemes specific to each theme
5. Maintain smooth visual transitions when switching themes

Theme Specifications

Ocean Theme:

• Gradient from blue (#108ee9) at 0% to cyan (#87d068) at 100%

Sunset Theme:

• Gradient from orange (#ff6b35) at 0% to pink (#f72585) at 100%

Forest Theme:

• Gradient from dark green (#2d6a4f) at 0% to light green (#95d5b2) at 100%

Component Interface

The component should accept the following props:

• percent: A number between 0 and 100 representing the progress percentage
• theme: A string indicating the theme mode ("ocean", "sunset", or "forest")

Visual Styling

• The progress indicator should have a stroke width of 8 pixels
• The background rail should be light gray (#e0e0e0)
• The component should render as a circle (not a line)

Test Cases

• When theme is "ocean" and percent is 50, the progress circle displays a blue-to-cyan gradient @test
• When theme is "sunset" and percent is 75, the progress circle displays an orange-to-pink gradient @test
• When theme is "forest" and percent is 30, the progress circle displays a dark-green-to-light-green gradient @test
• When theme changes from "ocean" to "sunset" at runtime, the gradient updates accordingly @test

Implementation

@generates

API

import React from 'react';

interface GradientSwitcherProps {
  percent: number;
  theme: 'ocean' | 'sunset' | 'forest';
}

export function GradientSwitcher(props: GradientSwitcherProps): JSX.Element;

Dependencies { .dependencies }

rc-progress { .dependency }

Provides progress visualization components with gradient support.