AIでローディングスピナーをデザインする【CSS生成】

データ読み込み中や処理中に表示するローディングアニメーション。CSS animationだけで多彩なデザインが作れます。AIにスタイルを指定して生成してもらいましょう。

方法①：既存のHTMLからCSSを生成する

AIへのプロンプト例

以下のHTMLのローディング要素に、
くるくる回転するスピナーのCSSアニメーションを書いてください。
・色はティール（#3e8685）
・大きさは48px
・CSSだけで実装（画像不要）
・画面中央に配置

<div class="loading">
  <div class="spinner"></div>
  <p>読み込み中...</p>
</div>

生成されたCSS例

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 200px;
}
.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(62, 134, 133, 0.2);
  border-top-color: #3e8685;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.loading p {
  color: #6b6b6b;
  font-size: 0.875rem;
}

方法②：HTMLとセットで生成する

AIへのプロンプト例

ローディングスピナーをHTML・CSSでまとめて作ってください。
デザインは：
・円形のスピナー（くるくる回転）
・下に「Loading...」テキスト
・画面全体をオーバーレイで覆い、コンテンツに重ねる形式
・「非表示」クラスを追加したら消える設計

応用プロンプト例（デザインのバリエーション）

以下のデザインのローディングアニメーションをCSSで作ってください：
3つのドットが左右に波打つように点滅するタイプ

ポイント

• 「ドット型」「バー型」「パルス型」など形を指定するとバリエーション豊富に作れます
• 非同期処理（API通信）と組み合わせる場合は「処理中に表示して完了で非表示にする」JSも一緒に依頼しましょう