syncfusion-blazor-progress-bar

What this skill does

# Implementing Syncfusion Blazor ProgressBar

## When to Use This Skill

Use this skill when the user needs to:
- Display progress for file uploads, downloads, or data processing
- Show loading states with determinate or indeterminate progress
- Visualize task completion percentages
- Implement buffer states for media players or streaming content
- Create circular or linear progress indicators
- Add progress tracking with custom styling and animations
- Show multi-stage progress with segments
- Implement accessible progress indicators with WCAG compliance
- Display progress with annotations, labels, or custom formatting

## Component Overview

The Syncfusion Blazor ProgressBar component is a visual indicator that displays the progress of an operation. It supports both linear and circular types, multiple states (determinate, indeterminate, buffer, active, striped), extensive customization options, animations, and full accessibility support.

## API Reference

📄 **Read:** [references/api-reference.md](references/api-reference.md)

Use this reference when you need the exact ProgressBar API surface, including:
- `SfProgressBar` properties such as `Value`, `Type`, `Role`, `Theme`, `Visible`, `ID`, `StartAngle`, `EndAngle`, and `RefreshAsync()`
- Child components such as `ProgressBarAnimation`, `ProgressBarEvents`, `ProgressBarAnnotations`, `ProgressBarAnnotation`, `ProgressBarLabelStyle`, `ProgressBarMargin`, `ProgressBarRangeColor`, and `ProgressBarRangeColors`
- Event callbacks such as `ValueChanged`, `ProgressCompleted`, `AnimationComplete`, `AnnotationRender`, `TextRender`, and `Loaded`
- Enums such as `ProgressType`, `CornerType`, `ModeType`, and `TextAlignmentType`

**Key Capabilities:**
- **Types:** Linear (horizontal bar) and Circular (donut/pie chart style)
- **States:** Determinate (known progress), Indeterminate (unknown progress), Buffer (dual progress), Active (animated), Striped (visual pattern)
- **Customization:** Colors, thickness, segments, radius, corners, margins, RTL support
- **Features:** Annotations, labels, range colors, gradients, secondary progress
- **Animation:** Configurable speed and delay
- **Events:** Value changes, completion, animation lifecycle
- **Accessibility:** WCAG 2.2 compliant with keyboard navigation

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)

When the user needs to set up the ProgressBar for the first time, guide them to this reference for:
- Prerequisites and system requirements
- Installation via Visual Studio, VS Code, or .NET CLI
- NuGet package installation (Syncfusion.Blazor.ProgressBar)
- Namespace imports and service registration
- Adding stylesheet and script references
- Basic linear and circular ProgressBar implementation
- First working example

### Types and Modes
📄 **Read:** [references/types-and-modes.md](references/types-and-modes.md)

When the user asks about or needs:
- Linear vs Circular ProgressBar types
- Choosing the right type for their use case
- Implementing basic linear progress bars
- Implementing circular/donut progress bars
- Pie progress mode for circular bars
- Segments in linear or circular types
- Secondary progress indicators
- Complete type-specific examples

### States and Behavior
📄 **Read:** [references/states-and-behavior.md](references/states-and-behavior.md)

When the user asks about or needs:
- Determinate progress (known completion percentage)
- Indeterminate progress (loading without known duration)
- Buffer state (dual progress for media/streaming)
- Active state (animated progress indicator)
- Striped visual pattern (linear only)
- Range configuration (Minimum/Maximum values)
- Combining multiple states
- Choosing the right state for their scenario

### Customization
📄 **Read:** [references/customization.md](references/customization.md)

When the user asks about or needs:
- Dividing progress into segments with custom colors
- Adjusting track, progress, or secondary progress thickness
- Customizing radius and inner radius (circular)
- Rounded corners (CornerRadius)
- Custom colors for progress, track, and secondary progress
- Range colors with gradient effects
- RTL (right-to-left) support
- Visibility control (showing/hiding progress bar)
- Margin and spacing adjustments
- Complete visual customization examples

### Annotations and Labels
📄 **Read:** [references/annotations-and-labels.md](references/annotations-and-labels.md)

When the user asks about or needs:
- Adding text annotations to the progress bar
- Custom HTML or component overlays
- Showing progress percentage labels
- Custom label formatting (TextRender event)
- Positioning annotations
- Multiple annotations
- Styling annotations and labels
- Combining annotations with labels

### Animation
📄 **Read:** [references/animation.md](references/animation.md)

When the user asks about or needs:
- Enabling progress animations
- Controlling animation speed (Duration)
- Adding animation delays
- Animation with different states
- AnimationComplete event handling
- Performance considerations
- Smooth progress transitions

### Events and Accessibility
📄 **Read:** [references/events-and-accessibility.md](references/events-and-accessibility.md)

When the user asks about or needs:
- ValueChanged event (tracking progress changes)
- ProgressCompleted event (when progress reaches maximum)
- AnimationComplete event (animation lifecycle)
- AnnotationRender event (customizing annotations)
- TextRender event (custom label formatting)
- Loaded event (component initialization)
- WCAG 2.2 and Section 508 compliance
- Keyboard navigation support
- Screen reader compatibility
- Color contrast and accessibility standards
- Mobile device support

## Quick Start Example

### Linear ProgressBar (Basic)

```razor
@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Linear" 
               Value="70" 
               Minimum="0" 
               Maximum="100"
               Height="60"
               TrackThickness="12" 
               ProgressThickness="12">
</SfProgressBar>
```

### Circular ProgressBar (Basic)

```razor
@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Circular" 
               Value="75" 
               Minimum="0" 
               Maximum="100"
               Height="160px"
               Width="160px"
               TrackThickness="8" 
               ProgressThickness="8">
</SfProgressBar>
```

### Indeterminate Loading State

```razor
@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Linear" 
               Value="20" 
               IsIndeterminate="true"
               Height="60"
               Minimum="0" 
               Maximum="100">
    <ProgressBarAnimation Enable="true" Duration="2000"></ProgressBarAnimation>
</SfProgressBar>
```

## Common Patterns

### Pattern 1: File Upload Progress
```razor
@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Linear" 
               Value="@uploadProgress" 
               ShowProgressValue="true"
               Height="60"
               ProgressColor="#28a745"
               TrackColor="#e9ecef"
               CornerRadius="CornerType.Round">
    <ProgressBarEvents ProgressCompleted="OnUploadComplete"></ProgressBarEvents>
</SfProgressBar>

@code {
    private double uploadProgress = 0;
    
    private void OnUploadComplete(ProgressValueEventArgs args)
    {
        // Handle upload completion
    }
}
```

### Pattern 2: Multi-Stage Progress with Segments
```razor
@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Linear" 
               Value="100" 
               Height="60"
               SegmentCount="4"
               SegmentColor='new string[] { "#00bdaf", "#2f7ecc", "#e9648e", "#fbb78a" }'>
</SfProgressBar>
```

### Pattern 3: Buffer State for Media Player
```razor
@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Linear" 
               V