syncfusion-react-progress-bar

What this skill does

# Implementing React Progress Bar Component

A comprehensive skill for implementing the Syncfusion React Progress Bar component for visual progress feedback, loading states, and task completion indicators.

## When to Use This Skill

Use this skill when you need to:
- Display progress of file uploads or downloads
- Show task completion percentage
- Indicate loading states (determinate or indeterminate)
- Visualize data processing or long-running operations
- Create progress spinners or circular indicators
- Handle secondary progress (buffer scenarios)
- Customize progress bar appearance and colors
- Implement animations and transitions
- Handle progress events and callbacks
- Ensure accessibility compliance for progress indicators

## Component Overview

The Syncfusion React Progress Bar is a lightweight component that visualizes task progress in linear, circular, or semi-circular shapes. It supports multiple states (determinate, indeterminate, buffer) and features animations, customization, and full accessibility support.

**Key Features:**
- **Multiple Types:** Linear, Circular, Semi-Circular shapes
- **States:** Determinate (known progress), Indeterminate (unknown), Buffer (secondary progress)
- **Animations:** Smooth transitions with configurable duration and delay
- **Customization:** Colors, heights, labels, themes
- **Events:** Progress tracking, start/complete callbacks
- **Accessibility:** WCAG 2.1 compliant with ARIA support
- **RTL Support:** Right-to-left language support

## Documentation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Installation and package setup
- Basic progress bar implementation
- CSS imports and themes
- First component example
- TypeScript vs JavaScript

### Types and Shapes
📄 **Read:** [references/types-and-shapes.md](references/types-and-shapes.md)
- Linear progress bar
- Circular progress bar
- Semi-circular progress bar
- Shape variations and code examples
- Choosing the right type for your use case

### States and Modes
📄 **Read:** [references/states-and-modes.md](references/states-and-modes.md)
- Determinate state (known progress, default)
- Indeterminate state (unknown progress, spinners)
- Buffer/Secondary progress (dual progress indicators)
- Combining multiple states
- Real-world scenarios for each state

### Customization and Styling
📄 **Read:** [references/customization-and-styling.md](references/customization-and-styling.md)
- Sizing (height, width configurations)
- Colors and fill customization
- Labels and text display
- Theme application
- CSS customization
- Responsive design patterns

### Animations, Events, and Accessibility
📄 **Read:** [references/animations-events-accessibility.md](references/animations-events-accessibility.md)
- Animation configuration and control
- Event handlers for progress tracking
- Using callbacks for task completion
- WCAG compliance
- ARIA attributes and labels
- Tooltip and annotation support
- Troubleshooting common issues

### API Reference
📄 **Read:** [references/api.md](references/api.md)
- Full list of public properties, methods and events for `ProgressBarComponent` (see file).

## Quick Start Example

```tsx
import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';

function App() {
  return (
    <div>
      {/* Linear Determinate Progress Bar */}
      <ProgressBarComponent
        id="linear"
        type="Linear"
        height="60"
        value={75}
        animation={{
          enable: true,
          duration: 2000,
          delay: 0
        }}
      />

      {/* Circular Progress Bar */}
      <ProgressBarComponent
        id="circular"
        type="Circular"
        height="160px"
        value={60}
      />

      {/* Indeterminate Loading Spinner */}
      <ProgressBarComponent
        id="indeterminate"
        type="Linear"
        height="60"
        isIndeterminate={true}
        animation={{
          enable: true,
          duration: 2000,
          delay: 0
        }}
      />
    </div>
  );
}

export default App;
```

## Common Patterns

### 1. File Upload Progress
```tsx
<ProgressBarComponent
  id="upload"
  type="Linear"
  value={uploadPercentage}
  showProgressValue={true}
  progressValueFormat="N0 '%'"
/>
```

### 2. Loading Spinner
```tsx
<ProgressBarComponent
  id="spinner"
  type="Circular"
  isIndeterminate={true}
  height="100px"
/>
```

### 3. Buffer Progress (Buffered Loading)
```tsx
<ProgressBarComponent
  id="buffer"
  type="Linear"
  value={40}
  secondaryProgress={80}
  height="60"
/>
```

### 4. Determinate Task Progress
```tsx
<ProgressBarComponent
  id="task"
  type="Linear"
  value={taskCompletionPercentage}
  showProgressValue={true}
  animation={{
    enable: true,
    duration: 1500
  }}
/>
```

## Key Props Reference

### Core Properties

| Prop | Type | Default | Purpose |
|------|------|---------|---------|
| `id` | string | - | Unique identifier for component |
| `type` | "Linear" \| "Circular" \| "Semicircle" | "Linear" | Shape of progress bar |
| `value` | number | 0 | Current progress value (0-100) |
| `secondaryProgress` | number | 0 | Secondary/buffer progress value |
| `isIndeterminate` | boolean | false | Indeterminate/loading mode |
| `height` | string | "100%" | Height of progress bar (CSS value) |
| `width` | string | "100%" | Width of progress bar (CSS value) |
| `showProgressValue` | boolean | false | Display percentage text |

### Animation & Styling

| Prop | Type | Default | Purpose |
|------|------|---------|---------|
| `animation` | AnimationModel | - | Animation config: `{ enable, duration, delay }` |
| `progressColor` | string | - | Color for progress fill (CSS color) |
| `trackColor` | string | - | Color for track background |
| `progressThickness` | number | 4 | Progress bar thickness (pixels) |
| `trackThickness` | number | 4 | Track thickness (pixels) |
| `isStriped` | boolean | false | Striped pattern appearance |
| `isGradient` | boolean | false | Gradient fill effect |
| `cssClass` | string | - | Custom CSS class for styling |

### Advanced Features

| Prop | Type | Default | Purpose |
|------|------|---------|---------|
| `cornerRadius` | "Round" \| "Auto" | "Auto" | Corner style for ends |
| `enableRtl` | boolean | false | Right-to-left layout |
| `enablePieProgress` | boolean | false | Pie view for circular type |
| `enableProgressSegments` | boolean | false | Segmented progress rendering |
| `segmentCount` | number | 1 | Number of segments |
| `rangeColors` | RangeColorModel[] | - | Colors for different ranges |
| `minimum` | number | 0 | Minimum progress value |
| `maximum` | number | 100 | Maximum progress value |

### Label & Format

| Prop | Type | Default | Purpose |
|------|------|---------|---------|
| `progressValueFormat` | string | "N0 '%'" | Format for value display (e.g., "N2 '%'") |
| `labelOnTrack` | boolean | true | Show label on the track |
| `labelStyle` | FontModel | - | Font styling for label |

**When to use each:**
- **type**: Choose based on space: Linear (full-width), Circular/Semicircle (compact)
- **value**: Update via state to reflect real progress
- **isIndeterminate**: Use for unknown duration tasks (loading, processing)
- **secondaryProgress**: Show buffer/estimated vs. actual progress
- **animation**: Enhance UX with smooth transitions (disable for real-time high-frequency updates)
- **cornerRadius**: "Round" for modern look, "Auto" for default
- **segmentCount**: Split progress into visual segments (e.g., 10 segments = 10% per segment)

## Common Use Cases with Code Examples

### Use Case 1: File Upload/Download

```tsx
const [uploadProgress, setUploadProgress] = useState(0);

<ProgressBarComponent
  type="Linear"
  value={uploadProgress}
  showProgressValue={true}
  progressValueFormat="N0 '%'"
  height="30"
  animation={{ enable: true, duration: 500 }}
/>
```

**Best Practices:**
- Use Linear type for wide displays
- Update value from upload progress events
- Show est