Loading Status Indicator

Build a loading status indicator component for a file upload application. The component should display the upload progress using visual indicators that show both determinate (known progress) and indeterminate (unknown progress) states.

Requirements

Core Functionality

The component should display upload status in three different states:

1. Preparing state: When the upload is being prepared but hasn't started yet, show an indeterminate loading animation
2. Uploading state: Once upload starts, show the actual progress percentage (0-100%) with a smooth animation
3. Processing state: After upload completes, show an indeterminate animation while the server processes the file

Visual Requirements

• Use circular progress indicators for all states
• The progress circle should have a visible stroke (at least 6px wide)
• Use different colors to distinguish between states:
  • Preparing: blue color
  • Uploading: green color
  • Processing: orange color
• Indeterminate animations should clearly indicate activity (spinning/moving effect)
• Progress updates should animate smoothly when values change

Component Interface

Create a UploadStatusIndicator component with the following props:

interface UploadStatusIndicatorProps {
  status: 'preparing' | 'uploading' | 'processing';
  progress?: number; // 0-100, only applicable when status is 'uploading'
}

Test Cases

• When status is 'preparing', displays an animated loading indicator @test
• When status is 'uploading' with progress 0, displays 0% progress @test
• When status is 'uploading' with progress 50, displays 50% progress @test
• When status is 'uploading' with progress 100, displays 100% progress @test
• When status is 'processing', displays an animated loading indicator @test

Implementation

@generates

Dependencies { .dependencies }

rc-progress { .dependency }

Provides React progress bar components with loading state support.