syncfusion-angular-progress-bar

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Progress Bar

实现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.

Angular Progress Bar是一款轻量级组件，用于可视化展示任务或流程的进度。它支持多种样式（线性、圆形、半圆形）、进度模式（确定、不确定、缓冲）、动画效果以及丰富的自定义选项。

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)

在以下场景使用该技能：

需要在Angular中展示任务进度
想要通过动画展示加载状态
需要不同样式的进度条（线性、圆形）
正在构建下载/上传进度UI
需要符合无障碍标准的进度指示器
想要展示多种进度状态（主进度 + 副进度）

请勿在以下场景使用该技能：

加载动画（使用Skeleton Loader展示加载状态）
步骤指示器（使用Stepper组件）
时间线可视化（使用Timeline组件）

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

Syncfusion Progress Bar提供：

多种样式：线性、圆形、半圆形
进度模式：确定、不确定、缓冲
动画效果：流畅的进度过渡，支持自定义时长和延迟
自定义选项：颜色（进度条、轨道、副进度）、厚度、分段、圆角、范围
分段支持：将进度条划分为多个分段，可调整分段间距
无障碍访问：完全符合WCAG标准，支持键盘导航、ARIA属性
事件：进度完成、值变更、文本渲染
响应式：与Angular的变更检测无缝协作

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

📄 阅读： references/getting-started.md

安装与包配置
Angular依赖与导入
基础进度条实现
CSS主题配置
最简运行示例
常见配置模式

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

📄 阅读： references/types-and-shapes.md

线性进度条
圆形进度条
半圆形进度条
样式专属属性
各类型适用场景
类型切换方法

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

📄 阅读： references/progress-modes.md

确定模式（已知进度）
不确定模式（未知进度）
缓冲模式（主进度 + 副进度）
模式选择指南
各模式的实际应用场景

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

📄 阅读： references/customization.md

尺寸与厚度
颜色配置（进度条与轨道）
最小值、最大值与当前值属性
半径与内半径
分段与分段间距
高级样式模式

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

📄 阅读： references/features-and-interactions.md

注释与标签
动画配置
提示框支持
事件处理（valueChanged、progressComplete）
范围指示器
响应式数据绑定

Accessibility

无障碍访问

📄 Read: references/accessibility.md

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

📄 阅读： references/accessibility.md

符合WCAG 2.1标准
WAI-ARIA属性
键盘导航支持
屏幕阅读器适配考量
无障碍测试
最佳实践

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 {
}

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

模式1：文件上传进度

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);
  }
}

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

模式2：带动画的加载状态

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>

typescript

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

模板：

html

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

Pattern 3: Multiple Progress States

模式3：多进度状态

typescript

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

Template:

html

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

typescript

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

模板：

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}

属性	类型	用途
`value`	number	当前进度值（0-100或自定义最小/最大值）
`type`	string	样式：'Linear'、'Circular'、'SemiCircular'
`isIndeterminate`	boolean	设为true时展示不确定状态
`secondaryProgress`	number	缓冲/副进度值
`minimum`	number	进度范围的最小值（默认：0）
`maximum`	number	进度范围的最大值（默认：100）
`height`	number\|string	进度条高度（像素或百分比）
`width`	number\|string	进度条宽度（像素或百分比）
`trackThickness`	number	轨道线条厚度
`progressThickness`	number	进度条厚度
`secondaryProgressThickness`	number	副进度条厚度
`progressColor`	string	进度条颜色（十六进制、RGB等）
`secondaryProgressColor`	string	副进度条颜色
`trackColor`	string	轨道背景色
`cornerRadius`	string	'Round' \| 'Square' - 边角样式
`radius`	number\|string	圆形/半圆形进度条的外半径
`innerRadius`	number\|string	环形样式的内半径
`segmentCount`	number	将进度条划分为N个分段
`segmentSpacing`	number	分段间的像素间距
`showProgressValue`	boolean	显示进度百分比文本
`animation`	AnimationModel	动画配置：{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.

Progress Bar组件会触发多个重要事件：

事件	描述	参数
`valueChanged`	进度值变更时触发	`IProgressValueEventArgs`
`progressCompleted`	进度达到100%时触发	`IProgressValueEventArgs`
`textRender`	进度文本渲染前触发	`ITextRenderEventArgs`

注意： 使用

(textRender)

事件自定义进度标签的显示格式。

API Reference

API参考

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

Syncfusion Angular

ProgressBar

的完整API参考位于

references

文件夹中，包含属性类型、方法锚点以及映射至官方文档的事件参数链接。

阅读API参考：references/api-reference.md

syncfusion-angular-progress-bar

Original

Translation

Implementing Syncfusion Angular Progress Bar

实现Syncfusion Angular Progress Bar

When to Use This Skill

何时使用该技能

Component Overview

组件概述

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

Types and Shapes

类型与样式

Progress Modes

进度模式

Customization

自定义配置

Features and Interactions

功能与交互

Accessibility

无障碍访问

Quick Start Example

快速入门示例

Common Patterns

常见模式

Pattern 1: File Upload Progress

模式1：文件上传进度

Pattern 2: Loading State with Animation

模式2：带动画的加载状态

Pattern 3: Multiple Progress States

模式3：多进度状态

Key Props Reference

关键属性参考

Events Reference

事件参考

API Reference

API参考

Related Components

相关组件