syncfusion-aspnetcore-progress-bar

Syncfusion Progress Bar の実装

Syncfusion Progress Bar コンポーネントは、複数の形状オプション、アニメーションのサポート、インタラクティブな機能を備え、タスクの進捗状況を視覚化するカスタマイズ可能なコントロールです。ファイルのアップロードやダウンロード、データ処理など、タスクの完了状況をユーザーに明確に伝える必要があるあらゆる場面に適しています。

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

次のような場合にこのスキルを使用します。

• 線形または円形の進捗インジケーターを表示する
• 視覚的なフィードバックとともにタスクの完了率を表示する
• ファイルのアップロード／ダウンロードの進捗状況の追跡を実装する
• 確定モードまたは不確定モードでローディング状態を作成する
• バッファー処理のための二次進捗インジケーターを追加する
• 進捗状況の変化を滑らかにアニメーション表示する
• 進捗状況の注釈とラベルを表示する
• WCAG に準拠したアクセシブルなプログレスバーを作成する
• 進捗情報を表示するツールチップを追加する
• 色、太さ、スタイルをカスタマイズする

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

API リファレンス

📄 参照: references/api-reference.md

• ProgressBar クラスの API ドキュメント一式
• 型と既定値を含むプロパティの定義
• 使用可能なイベントとコールバックすべて
• 設定オプションと使用パターン
• 関連する設定クラスと列挙型
• Syncfusion 公式 API リファレンスへのリンク

はじめに

📄 参照: references/getting-started.md

• NuGet パッケージを使用したインストール
• ASP.NET Core プロジェクトのセットアップ
• Tag Helper の設定
• スタイルシートとスクリプトの追加
• 基本的なプログレスバーの初期化
• 最初のプログレスバーのレンダリング

種類と形状

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

• 標準的な水平方向の進捗表示に使う線形プログレスバー
• コンパクトな表示に使う円形プログレスバー
• ゲージのような表示に使う半円形プログレスバー
• 用途に適した形状の選択

モードと状態

📄 参照: references/modes-and-states.md

• 進捗の見積もりが可能な場合に使う確定モード
• 進捗の所要時間が不明な場合に使う不確定モード
• 二次的な進捗表示に使うバッファーモード
• さまざまな状態間の遷移

カスタマイズ

📄 参照: references/customization.md

• 色とテーマのカスタマイズ
• 太さとサイズの調整
• 半径と角のスタイル設定
• マイルストーンの追跡に使うセグメント化
• CSS ベースのカスタマイズオプション
• 高度なスタイル設定の例

アニメーションと効果

📄 参照: references/animation-and-effects.md

• アニメーションの有効化と設定
• 再生時間とタイミングの制御
• イージング関数とパフォーマンス
• 滑らかな状態遷移

ラベルと注釈

📄 参照: references/labels-and-annotations.md

• プログレスバーへのテキストラベルの追加
• 進捗率の表示
• 円形プログレスバーの注釈コンテンツ
• ラベルの動的な更新
• ラベルの配置とスタイル設定

イベントとインタラクション

📄 参照: references/events-and-interactions.md

• ValueChanged イベントの処理
• ProgressCompleted イベントの発生
• イベントのバインドとコールバック
• アプリケーションのワークフローとの統合

ツールチップのサポート

📄 参照: references/tooltip-support.md

• ツールチップ表示の有効化
• ツールチップの書式設定とカスタマイズ
• ホバー時のツールチップ表示
• カスタムツールチップのコンテンツ

アクセシビリティ

📄 参照: references/accessibility.md

• WCAG 2.2 への準拠と標準
• ARIA 属性とロール
• キーボードナビゲーションのサポート
• スクリーンリーダーとの互換性
• テストと検証

クイックスタートの例

ASP.NET Core で基本的な線形プログレスバーを作成する最小限の例を紹介します。

<ejs-progressbar id="linearProgress" 
                  type="Linear" 
                  value="50" 
                  minimum="0" 
                  maximum="100">
</ejs-progressbar>

これにより、進捗率 50％のプログレスバーが作成されます。デフォルトの種類は線形で、範囲は 0（最小）から 100（最大）です。

よくあるパターン

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

<ejs-progressbar id="uploadProgress" 
                  type="Linear" 
                  value="0" 
                  minimum="0" 
                  maximum="100">
    <e-progressbar-animation enable="true" 
                              duration="1000" 
                              delay="0">
    </e-progressbar-animation>
</ejs-progressbar>

<button id="uploadBtn" type="button">Start Upload</button>
<script>
document.getElementById('uploadBtn').addEventListener('click', function() {
    var progressBar = document.getElementById('uploadProgress').ej2_instances[0];
    var interval = setInterval(function() {
        var currentValue = progressBar.value;
        if (currentValue < 100) {
            progressBar.value += 10;
        } else {
            clearInterval(interval);
        }
    }, 500);
});
</script>

パターン 2：円形プログレスバーによるタスクの完了状況

<ejs-progressbar id="taskProgress" 
                  type="Circular" 
                  value="75" 
                  minimum="0" 
                  maximum="100"
                  showProgressValue="true">
</ejs-progressbar>

パターン 3：不確定な読み込み状態

<ejs-progressbar id="loadingProgress" 
                  type="Linear" 
                  value="30"
                  isIndeterminate="true">
</ejs-progressbar>

タスクの所要時間は不明ですが、アプリケーションがデータを処理中の場合に使用します。

パターン 4：複数のステップを示すセグメント化された進捗状況

<ejs-progressbar id="stepsProgress" 
                  type="Linear" 
                  value="60" 
                  segmentCount="5"
                  minimum="0" 
                  maximum="100">
</ejs-progressbar>

プログレスバーを 5 つのセグメントに分割します。複数のステップで構成されるプロセスに便利です。

主なプロパティ

プロパティ	型	デフォルト	用途
type	string	"Linear"	プログレスバーの形状：Linear、Circular、SemiCircular
value	number	0	現在の進捗値
minimum	number	0	範囲の最小値
maximum	number	100	範囲の最大値
isIndeterminate	boolean	false	不確定な読み込み状態を表示します
segmentCount	number	1	プログレスバーをセグメントに分割します
showProgressValue	boolean	false	パーセンテージのラベルを表示します
trackThickness	number	0	トラックバーの太さ（ピクセル単位）
progressThickness	number	0	プログレスバーの太さ（ピクセル単位）
cornerRadius	string	"Auto"	角の丸みのスタイル
secondaryProgress	number	NaN	バッファーモード用の副次的な進捗値
trackColor	string	null	トラック（背景）の色
progressColor	string	null	メインの進捗バーの塗りつぶし色
secondaryProgressColor	string	""	副次的な進捗／バッファーの色

主なイベント

イベント	発生条件	使用例
ValueChanged	進捗値が変化したとき	UI の更新、進捗の節目の追跡
ProgressCompleted	値が最大値に達したとき	次のアクションの実行、完了メッセージの表示

---

詳細な実装方法については、上記のリファレンスファイルを参照してください。それぞれのファイルに、トピックに応じた具体的な手順、コード例、ベストプラクティスが記載されています。