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](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](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](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](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](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](references/accessibility.md) - WCAG 2.1 compliance - WAI-ARIA attributes - Keyboard navigation support - Screen reader considerations - Testing accessibility - Best practices ## Quick Start Example ```typescript 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 ```typescript 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 ```typescript export class LoadingComponent { @Input() isLoading = false; } ``` Template: ```html <ejs-progressbar *ngIf="isLoading" [isIndeterminate]="true" [height]="4" [animation]="{ enable: true, duration: 2000, delay: 0 }"> </ejs-progressbar> ``` ### Pattern 3: Multiple Progress States ```typescript export class DownloadComponent { primaryProgress = 35; secondaryProgress = 65; } ``` Template: ```html <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](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