syncfusion-angular-progress-bar

Implementing Syncfusion Angular Progress Bar

The Angular Progress Bar is a lightweight component that visually represents the progress of a task or process. It supports multiple shapes (linear, circular, semi-circular), progress modes (determinate, indeterminate, buffer), animations, and comprehensive customization options.

When to Use This Skill

Use this skill when:

• You need to display progress of a task in Angular
• You want to show loading states with animations
• You need different progress bar shapes (linear, circular)
• You're building download/upload progress UI
• You need accessibility-compliant progress indicators
• You want to display multiple progress states (primary + secondary)

Don't use this skill for:

• Spinners (use Skeleton Loader for loading states)
• Step indicators (use Stepper component)
• Timeline visualization (use Timeline component)

Component Overview

The Syncfusion Progress Bar provides:

• Multiple Shapes: Linear, Circular, SemiCircular
• Progress Modes: Determinate, Indeterminate, Buffer
• Animations: Smooth progress transitions with customizable duration and delay
• Customization: Colors (progress, track, secondary), thickness, segments, corner radius, ranges
• Segment Support: Divide progress into segments with adjustable spacing
• Accessibility: Full WCAG compliance, keyboard navigation, ARIA attributes
• Events: Progress completion, value changes, text rendering
• Reactive: Works seamlessly with Angular's change detection

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• Angular dependencies and imports
• Basic progress bar implementation
• CSS theme configuration
• Minimal working example
• Common setup patterns

Types and Shapes

📄 Read: references/types-and-shapes.md

• Linear progress bar
• Circular progress bar
• Semi-circular progress bar
• Shape-specific properties
• When to use each type
• Switching between types

Progress Modes

📄 Read: references/progress-modes.md

• Determinate mode (known progress)
• Indeterminate mode (unknown progress)
• Buffer mode (primary + secondary progress)
• Mode selection guidelines
• Real-world scenarios for each mode

Customization

📄 Read: references/customization.md

• Sizing and thickness
• Color configuration (progress and track)
• Min, Max, and Value properties
• Radius and InnerRadius
• Segments and segments spacing
• Advanced styling patterns

Features and Interactions

📄 Read: references/features-and-interactions.md

• Annotations and labels
• Animation configuration
• Tooltip support
• Event handling (valueChanged, progressComplete)
• Range indicators
• Reactive data binding

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.1 compliance
• WAI-ARIA attributes
• Keyboard navigation support
• Screen reader considerations
• Testing accessibility
• Best practices

Quick Start Example

import { Component } from '@angular/core';
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ProgressBarModule],
  template: `
    <div style="margin: 20px;">
      <!-- Linear Progress -->
      <h4>File Download</h4>
      <ejs-progressbar
        [value]="65"
        height="20"
        type="Linear"
        style="width: 300px;">
      </ejs-progressbar>

      <!-- Circular Progress -->
      <h4 style="margin-top: 20px;">Task Completion</h4>
      <ejs-progressbar
        [value]="65"
        type="Circular"
        height="200"
        width="200">
      </ejs-progressbar>

      <!-- Semi-Circular Progress -->
      <h4 style="margin-top: 20px;">System Status</h4>
      <ejs-progressbar
        [value]="65"
        type="SemiCircular"
        height="200"
        width="200">
      </ejs-progressbar>
    </div>
  `
})
export class AppComponent {
}

Common Patterns

Pattern 1: File Upload Progress

export class FileUploadComponent {
  uploadProgress = 0;

  onFileUpload(file: File) {
    // Simulate upload
    const interval = setInterval(() => {
      this.uploadProgress += Math.random() * 30;
      if (this.uploadProgress >= 100) {
        this.uploadProgress = 100;
        clearInterval(interval);
      }
    }, 500);
  }
}

Pattern 2: Loading State with Animation

export class LoadingComponent {
  @Input() isLoading = false;
}

Template:

<ejs-progressbar
  *ngIf="isLoading"
  [isIndeterminate]="true"
  [height]="4"
  [animation]="{ enable: true, duration: 2000, delay: 0 }">
</ejs-progressbar>

Pattern 3: Multiple Progress States

export class DownloadComponent {
  primaryProgress = 35;
  secondaryProgress = 65;
}

Template:

<ejs-progressbar
  [value]="primaryProgress"
  [secondaryProgress]="secondaryProgress"
  type="Linear">
</ejs-progressbar>

Key Props Reference

Property	Type	Purpose
value	number	Current progress value (0-100 or custom min/max)
type	string	Shape: 'Linear', 'Circular', 'SemiCircular'
isIndeterminate	boolean	Show indeterminate state when true
secondaryProgress	number	Buffer/secondary progress value
minimum	number	Minimum value of progress range (default: 0)
maximum	number	Maximum value of progress range (default: 100)
height	number|string	Progress bar height in pixels or percentage
width	number|string	Progress bar width in pixels or percentage
trackThickness	number	Track line thickness
progressThickness	number	Progress bar thickness
secondaryProgressThickness	number	Secondary progress thickness
progressColor	string	Progress bar color (hex, rgb, etc)
secondaryProgressColor	string	Secondary progress color
trackColor	string	Track background color
cornerRadius	string	'Round' | 'Square' - Corner style
radius	number|string	Outer radius for circular/semi-circular bars
innerRadius	number|string	Inner radius for donut-style appearance
segmentCount	number	Divide progress into N segments
segmentSpacing	number	Space between segments in pixels
showProgressValue	boolean	Display progress percentage text
animation	AnimationModel	Animation config: {enable, duration, delay}

Events Reference

The Progress Bar component emits several important events:

Event	Description	Args
valueChanged	Fired when progress value changes	IProgressValueEventArgs
progressCompleted	Fired when progress reaches 100%	IProgressValueEventArgs
textRender	Fired before rendering progress text	ITextRenderEventArgs

Note: Use (textRender) event to customize the progress label display format.

API Reference

A complete API reference for the Syncfusion Angular ProgressBar is available in the references folder. It includes property types, method anchors, and event arg links that map to the official docs.

Read the API reference: references/api-reference.md

Related Components

• Skeleton Loader - For general loading indicators
• Spinner - For indeterminate loading states
• Stepper - For step-by-step progress
• Toast - For progress notifications