表の「読み込み中」と「データなし」

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[表の列]

例：名前、メールアドレス、登録日

[データなしのメッセージ]

例：まだメンバーがいません

[最初の行動]

例：メンバーを招待する

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で、表の3つの状態の表示を実装してください。

## 作るもの
- 表の列：[表の列]
- 状態1：読み込み中
- 状態2：データなし（[データなしのメッセージ]）
- 状態3：読み込みに失敗
- 3つを切り替えて確かめるための、サンプルのボタン

## 共通
- どの状態でも、表の外枠と見出しの行は表示したままにする（切り替わったときに、まわりが動かないように）
- 表：外枠 1px solid #E2E8F0、角丸 10px。見出しの行は背景 #F7F9FC
- 本体の部分は、最小の高さ 280px

## 読み込み中
- データの行のかわりに、グレーの棒（スケルトン）の行を5行表示する
- 棒の幅は、列ごと・行ごとに少し変える（60〜90%）。高さ 12px、角丸 4px、色 #EDF1F7
- 光が左から右へ流れる動き（1.5秒でくり返す）

## データなし
- 本体の中央に、上から アイコン → メッセージ → 補足 → ボタン
- アイコン：56px の円、背景は #1463F0 の9%の淡い色、なかに #1463F0 の線のアイコン
- メッセージ：16px、font-weight 700、色 #1B2A44
- 補足：14px、色 #5F6D84（例：招待すると、ここに表示されます）
- ボタン：「[最初の行動]」。高さ 40px、左右padding 20px、角丸 999px、背景 #1463F0、文字 #FFFFFF・14px・font-weight 700
- 検索や絞り込みの結果が0件のときは、メッセージを「条件に合うデータがありません」にし、ボタンを「条件をクリア」にする

## 読み込みに失敗
- 中央に、警告のアイコン（色 #C9343A）、「データを読み込めませんでした」、「もう一度試す」のボタン（枠線だけのボタン）

## アクセシビリティ
- 読み込み中は、表に aria-busy="true" を付け、読み上げ用に「読み込み中」の文字を置く
- データなしと失敗のメッセージは、表のなかの1つのセル（colspan ですべての列をまたぐ）に入れる
- 失敗のメッセージは role="alert"
- 光の動きは prefers-reduced-motion で無効化

## 出力形式
- [使用技術]のコードを1つ出力