syncfusion-angular-progress-bar

Syncfusion Angular Progress Bar 是一个轻量级的 Angular UI 组件，用于以可视化方式表示任务或流程的进度。

主要能力

组件提供以下能力：

多种形状：Linear（线性）、Circular（圆形）、SemiCircular（半圆形）。
进度模式：Determinate（确定）、Indeterminate（不确定）、Buffer（缓冲）。
动画：平滑的进度过渡，可自定义时长与延迟。
定制：进度色、轨道色、次要进度色、粗细、分段、圆角、范围等。
分段支持：可将进度划分为多个分段，并可调整分段间距。
无障碍：符合 WCAG 规范，支持键盘导航与 ARIA 属性。
事件：进度完成、值变化、文本渲染等。
响应式：与 Angular 变更检测协同工作。

使用方式

通过 @syncfusion/ej2-angular-progressbar 中的 ProgressBarModule 导入使用。组件选择器为 ejs-progressbar，通过属性绑定控制值、类型、高度、宽度等。示例：

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

常见模式

文件上传进度：通过变量保存上传进度，配合定时器更新值。

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

带动画的加载状态：

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

多进度状态（主进度 + 次要进度）：

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

关键属性

value：当前进度值（0-100 或自定义最小/最大值）。
type：形状，'Linear'、'Circular'、'SemiCircular'。
isIndeterminate：为 true 时显示不确定状态。
secondaryProgress：缓冲/次要进度值。
minimum / maximum：进度范围的最小/最大值（默认 0 / 100）。
height / width：进度条高度/宽度，可用像素或百分比。
trackThickness / progressThickness / secondaryProgressThickness：轨道、进度、次要进度线条粗细。
progressColor / secondaryProgressColor / trackColor：颜色配置。
cornerRadius：'Round' | 'Square' 圆角样式。
radius / innerRadius：圆形或半圆形的外半径/内半径（甜甜圈样式）。
segmentCount / segmentSpacing：进度分段数量及像素间距。
showProgressValue：是否显示进度百分比文本。
animation：动画配置 {enable, duration, delay}。

事件

valueChanged：进度值变化时触发（IProgressValueEventArgs）。
progressCompleted：进度达到 100% 时触发（IProgressValueEventArgs）。
textRender：渲染进度文本前触发（ITextRenderEventArgs），可用于自定义进度标签显示格式。

适用场景

当需要在 Angular 中展示任务进度、加载状态动画、不同进度条形状、下载/上传进度界面、无障碍进度指示或多个进度状态（主 + 次要）时适用。

不适用于：加载骨架（应使用 Skeleton Loader）、步骤指示器（应使用 Stepper 组件）、时间线可视化（应使用 Timeline 组件）。

限制

资料未提供关于收费、价格、平台兼容版本、性能指标或安装命令的具体信息。