syncfusion-angular-progress-bar

Syncfusion Angular Progress Bar の実装

Angular Progress Bar は、タスクやプロセスの進捗状況を視覚的に表示する軽量なコンポーネントです。複数の形状（線形、円形、半円形）、進捗モード（確定、不確定、バッファー）、アニメーション、包括的なカスタマイズオプションに対応しています。

このスキルを使用する場面

次の場合にこのスキルを使用してください：

• Angular でタスクの進捗状況を表示する必要がある
• アニメーションで読み込み状態を表示したい
• さまざまな形状のプログレスバー（線形、円形）が必要である
• ダウンロード／アップロードの進捗 UI を構築している
• アクセシビリティに準拠した進捗インジケーターが必要である
• 複数の進捗状態（プライマリ＋セカンダリ）を表示したい

次の場合はこのスキルを使用しないでください：

• スピナー（読み込み状態には Skeleton Loader を使用してください）
• ステップインジケーター（Stepper コンポーネントを使用してください）
• タイムラインの可視化（Timeline コンポーネントを使用してください）

コンポーネントの概要

Syncfusion Progress Bar が提供する機能：

• 複数の形状：線形、円形、半円形
• 進捗モード：確定、不確定、バッファー
• アニメーション：期間と遅延をカスタマイズできる、滑らかな進捗の遷移
• カスタマイズ：色（進捗、トラック、セカンダリ）、太さ、セグメント、角の丸み、範囲
• セグメントのサポート：間隔を調整して進捗をセグメントに分割
• アクセシビリティ：WCAG への完全準拠、キーボード操作、ARIA 属性
• イベント：進捗の完了、値の変更、テキストのレンダリング
• リアクティブ：Angular の変更検知とシームレスに連携

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ
• Angular の依存関係とインポート
• 基本的なプログレスバーの実装
• CSS テーマの設定
• 最小構成の動作例
• 一般的なセットアップパターン

種類と形状

📄 参照： references/types-and-shapes.md

• 線形プログレスバー
• 円形プログレスバー
• 半円形プログレスバー
• 形状固有のプロパティ
• 各種類の使用場面
• 種類の切り替え

進捗モード

📄 参照： references/progress-modes.md

• 確定モード（既知の進捗）
• 不確定モード（未知の進捗）
• バッファーモード（プライマリ＋セカンダリの進捗）
• モードの選択ガイドライン
• 各モードの実際の使用例

カスタマイズ

📄 参照： references/customization.md

• サイズと太さ
• 色の設定（進捗とトラック）
• Min、Max、Value プロパティ
• Radius と InnerRadius
• セグメントとセグメント間隔
• 高度なスタイル設定パターン

機能とインタラクション

📄 参照： references/features-and-interactions.md

• 注釈とラベル
• アニメーションの設定
• ツールチップのサポート
• イベント処理（valueChanged、progressComplete）
• 範囲インジケーター
• リアクティブなデータバインディング

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.1 への準拠
• WAI-ARIA 属性
• キーボード操作のサポート
• スクリーンリーダーに関する考慮事項
• アクセシビリティのテスト
• ベストプラクティス

クイックスタート例

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;">
      
      <h4>File Download</h4>
      <ejs-progressbar
        [value]="65"
        height="20"
        type="Linear"
        style="width: 300px;">
      </ejs-progressbar>

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

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

一般的なパターン

パターン 1：ファイルアップロードの進捗

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

パターン 2：アニメーション付きの読み込み状態

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

テンプレート：

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

パターン 3：複数の進捗状態

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

テンプレート：

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

主要プロパティのリファレンス

プロパティ	型	用途
value	number	現在の進捗値（0～100、またはカスタムの最小値／最大値）
type	string	形状：'Linear'、'Circular'、'SemiCircular'
isIndeterminate	boolean	true の場合、不確定状態を表示します
secondaryProgress	number	バッファー／第 2 の進捗値
minimum	number	進捗範囲の最小値（デフォルト：0）
maximum	number	進捗範囲の最大値（デフォルト：100）
height	number|string	ピクセルまたはパーセンテージで指定する進捗バーの高さ
width	number|string	ピクセルまたはパーセンテージで指定する進捗バーの幅
trackThickness	number	トラック線の太さ
progressThickness	number	進捗バーの太さ
secondaryProgressThickness	number	第 2 の進捗バーの太さ
progressColor	string	進捗バーの色（hex、rgb など）
secondaryProgressColor	string	第 2 の進捗バーの色
trackColor	string	トラックの背景色
cornerRadius	string	'Round' | 'Square' - 角のスタイル
radius	number|string	円形／半円形バーの外側の半径
innerRadius	number|string	ドーナツ状に表示するための内側の半径
segmentCount	number	進捗を N 個のセグメントに分割します
segmentSpacing	number	セグメント間のピクセル単位の間隔
showProgressValue	boolean	進捗率のテキストを表示します
animation	AnimationModel	アニメーション設定：{enable, duration, delay}

イベントのリファレンス

Progress Bar コンポーネントは、いくつかの重要なイベントを発生させます。

イベント	説明	引数
valueChanged	進捗値が変化したときに発生します	IProgressValueEventArgs
progressCompleted	進捗が 100% に達したときに発生します	IProgressValueEventArgs
textRender	進捗テキストを描画する前に発生します	ITextRenderEventArgs

注： 進捗ラベルの表示形式をカスタマイズするには、(textRender) イベントを使用します。

API リファレンス

Syncfusion Angular ProgressBar の完全な API リファレンスは、references フォルダーにあります。プロパティの型、メソッドのアンカー、公式ドキュメントに対応するイベント引数へのリンクが含まれています。

API リファレンスを読む：references/api-reference.md

関連コンポーネント

• スケルトンローダー - 一般的な読み込みインジケーター用
• スピナー - 不確定な読み込み状態用
• ステッパー - ステップごとの進捗表示用
• トースト - 進捗通知用