Blazorで使用するためのCSSスピナーの作成方法

まず、スピナーを表示するために必要なCSSを作成します。これは、Blazorのwwwroot/css/site.cssファイルに記述します。以下は、例として使用できるシンプルなCSSコードです。

.spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

上記のコードでは、.spinnerクラスがスピナー要素を定義しています。このクラスは、インラインブロック要素として表示され、高さと幅が40ピクセルに設定されています。さらに、外側のボーダーは灰色で、上部のボーダーは青色に設定されています。spinアニメーションは、2秒間で360度回転するように設定されています。

次に、Blazorのコンポーネントでスピナーを使用する方法を説明します。以下は、Blazorコンポーネントでスピナーを表示する例です。

@if (isLoading)
{
    <div class="spinner"></div>
}
else
{
    <p>コンテンツが表示されます</p>
}

上記の例では、isLoadingというブール型の変数を使用して、ローディング状態を管理しています。isLoadingがtrueの場合、スピナーが表示されます。isLoadingがfalseの場合、コンテンツが表示されます。

これで、BlazorアプリケーションでCSSスピナーを使用する準備が整いました。この方法を使用すると、ユーザーが操作を待つ必要がある場合に、視覚的なフィードバックを提供することができます。