CSSカーソルでローディングアイコンを表示する方法

方法1: カスタムカーソルを使用する

/* CSS */
body {
  cursor: url('loading.gif'), auto;
}

この方法では、"loading.gif"という名前のローディングアイコン画像を使用してカスタムカーソルを定義しています。"auto"は、カーソルが要素上で自動的に変化することを意味します。

方法2: パーセンテージでローディングアイコンを表示する

/* HTML */
<div class="loader"></div>
/* CSS */
.loader {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: url('loading.gif') no-repeat center center;
  cursor: wait;
}

この方法では、要素全体を覆うオーバーレイ要素を作成し、その背景にローディングアイコン画像を表示します。"cursor: wait;"は、カーソルを待機中のアイコンに変更します。

方法3: CSSアニメーションを使用する

/* HTML */
<div class="loader"></div>
/* CSS */
.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
  cursor: progress;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

この方法では、CSSアニメーションを使用して回転するローディングアイコンを作成します。アニメーションは無限ループし、カーソルを"progress"スタイルに変更します。

これらはいくつかの一般的な方法ですが、他にもさまざまなアプローチがあります。適切な方法を選択するには、使用するアイコンの種類やデザイン要件に応じて調整することが重要です。