syncfusion-aspnetcore-spinner

Syncfusion ASP.NET Core Spinner の実装

このスキルを使用するタイミング

ユーザーが次のことを必要としている場合に、このスキルを使用します。

• 非同期処理（API 呼び出し、ファイルアップロード）中に読み込みインジケーターを表示する
• アプリがフリーズしたと思われないように進行状況をフィードバックする
• 特定のページ領域でユーザー操作をブロックする
• 色、テーマ、テンプレートを使ってスピナーの外観をカスタマイズする
• スピナーオーバーレイの表示先として特定の要素を指定する
• スピナーのライフサイクルを管理する（作成、表示、非表示、破棄）
• 異なる種類のスピナーを適用する（Material、Fabric、Bootstrap のテーマ）

Spinner の概要

Syncfusion Spinner は、処理中であることを示すために対象要素上に表示される、軽量な読み込みインジケーターです。Web アプリケーションの非同期処理中に視覚的なフィードバックを提供するために欠かせません。

主な特徴：

• 対象要素上にオーバーレイとして表示されます
• 対象要素内の中央にレンダリングされます
• 表示中は対象要素へのユーザー操作を防ぎます
• テーマベースのスタイル設定に対応しています（Material、Fabric、Bootstrap）
• ブランドに合わせたインジケーターにするため、カスタム HTML テンプレートを使用できます
• 軽量で高パフォーマンスです

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

はじめに

📄 参照： references/getting-started.md

• インストールと前提条件のセットアップ
• Syncfusion のスタイルシートとスクリプトリソースの追加
• createSpinner() を使った最初のスピナーの作成
• showSpinner() と hideSpinner() を使ったスピナーの表示と非表示
• 特定のページ要素の指定
• 基本的な実装パターン

種類と設定

📄 参照： references/spinner-types.md

• 使用可能なスピナーの種類（Material、Fabric、Bootstrap、Bootstrap4、High Contrast）
• setSpinner() を使ったスピナーの種類の変更
• テーマに基づく種類の選択
• 各種類の使いどころ
• コンポーネント作成前の設定

スタイル設定とカスタマイズ

📄 参照： references/styling-customization.md

• 各テーマの CSS カスタマイズパターン
• ストロークの色と外観の変更
• Material テーマの CSS セレクター
• Fabric テーマの CSS セレクター
• Bootstrap テーマの CSS セレクター
• Bootstrap4 テーマの CSS セレクター
• High Contrast テーマの CSS セレクター
• CSS 変数とカスタムスタイルの使用

カスタムテンプレート

📄 参照： references/templates.md

• カスタムスピナーテンプレートの作成
• テンプレート設定での setSpinner() の使用
• カスタム HTML および SVG テンプレート
• カスタムテンプレートの使いどころ
• テンプレートの適用範囲と初期化順序
• CSS を使ったカスタムテンプレートのスタイル設定

設定メソッドのリファレンス

📄 参照： references/configuration-methods.md

• createSpinner() メソッドとパラメーター
• showSpinner() メソッドの動作
• hideSpinner() メソッドとクリーンアップ
• 種類とテンプレートを設定する setSpinner() メソッド
• 対象要素の設定
• メソッドチェーンと初期化パターン

クイックスタートの例

最小限の実装

<div id="container">
    <p>Content here</p>
    <button id="loadBtn">Start Loading</button>
</div>

<script>
    // Create spinner targeting the container
    var target = document.getElementById('container');
    ej.popups.createSpinner({ target: target });
    
    // Show spinner on button click
    document.getElementById('loadBtn').addEventListener('click', function() {
        ej.popups.showSpinner(target);
        
        // Simulate async work
        setTimeout(function() {
            ej.popups.hideSpinner(target);
        }, 3000);
    });
</script>

よくあるパターン

パターン 1：スピナーを使ったフォーム送信

function submitForm() {
    var target = document.getElementById('formContainer');
    ej.popups.createSpinner({ target: target });
    ej.popups.showSpinner(target);
    
    fetch('/api/submit', { method: 'POST', body: formData })
        .then(response => response.json())
        .then(data => {
            ej.popups.hideSpinner(target);
            showSuccessMessage('Form submitted');
        })
        .catch(error => {
            ej.popups.hideSpinner(target);
            showErrorMessage('Submission failed');
        });
}

パターン 2：複数の非同期処理

var target = document.getElementById('container');
ej.popups.createSpinner({ target: target });

// Show once, hide when all complete
Promise.all([fetch1(), fetch2(), fetch3()])
    .then(() => {
        ej.popups.showSpinner(target);
        // Process results
        ej.popups.hideSpinner(target);
    });

パターン 3：テーマベースのスピナー

// Set spinner type before creating other components
ej.popups.setSpinner({ type: 'Bootstrap' });

var target = document.getElementById('container');
ej.popups.createSpinner({ target: target });
ej.popups.showSpinner(target);

主なメソッドのリファレンス

メソッド	目的	使用方法
createSpinner(config)	対象のスピナーを初期化する	ej.popups.createSpinner({ target: element })
showSpinner(target)	スピナーを表示する	ej.popups.showSpinner(targetElement)
hideSpinner(target)	スピナーを非表示にする	ej.popups.hideSpinner(targetElement)
setSpinner(config)	スピナーの種類／テンプレートを設定する	ej.popups.setSpinner({ type: 'Bootstrap' })

重要： setSpinner() を有効にするには、createSpinner() より前に呼び出す必要があります。

よくある使用例

サーバーからのデータ読み込み

// Show spinner while fetching data
ej.popups.showSpinner(target);

fetch('/api/data')
    .then(r => r.json())
    .then(data => {
        populateUI(data);
        ej.popups.hideSpinner(target);  // Hide when done
    });

ファイルアップロードの進行状況

ej.popups.showSpinner(uploadTarget);

uploadFile(file)
    .then(() => {
        ej.popups.hideSpinner(uploadTarget);
        showMessage('Upload complete');
    });

グリッドのデータバインディング

// Show spinner while grid loads data
ej.popups.showSpinner(gridContainer);

// Grid handles its own loading after initialization
// Hide spinner when grid dataBound event fires
gridInstance.dataBound = function() {
    ej.popups.hideSpinner(gridContainer);
};

次のステップ

1. 使い始める - references/getting-started.md
2. スピナーの種類を選択する - references/spinner-types.md
3. 外観をカスタマイズする - references/styling-customization.md
4. 必要に応じてカスタムテンプレートを追加する - references/templates.md
5. 利用可能なメソッドを確認する - references/configuration-methods.md

---

Syncfusion ASP.NET Core コンポーネントの詳細については、メインライブラリガイドを参照してください。