3つの点が順に跳ねる 読み込み中の動き

通称：ドットローダーDot Loader

見本では出したままにしています。実際は読み込みが終わったら外します。

処理が終わるまでの時間が読めないとき、3つの点が左から順に小さく跳ねて「動いている」ことを伝えます。少し待ってから出し、「読み込み中」の文字も添えます。

自分のサイトの中身で、この形を作らせる指示文です。最初の「サイトの情報」を書き換えてから渡します。今あるページを直させるときは、その HTML を貼ります。

この形で作る 
# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「ドットローダー」（Dot Loader）と呼ばれる動きです。

# 作ってほしい動き
Dot Loader（3つの点が順に跳ねる）。読み込みにかかる時間がわからないとき、直径 10px の点が3つ横に並び、左から順に 8px 跳ねてもとに戻る動きをくり返す。0.3秒たっても終わらないときだけ出す。

# 動き
- 点：直径 10px、間は 6px、色はアクセントの色。右に「読み込み中」の文字を添える
- 跳ね方：transform: translateY(0) → translateY(-8px) → translateY(0)。1回 1.2秒のうち初めの6割で跳ね、残りは止まる。ease-in-out でくり返す（infinite）
- 順番：2つ目・3つ目は 1.2秒の 15%・30% ずつ遅らせて始める（animation-delay）
- 出し方：0.3秒待ってから opacity 0 → 1 を 0.2秒で。すぐ終わる処理では一瞬も出ない
- 読み込みが終わったら、要素ごと外す

# 付ける場所
- ボタンの下や、一覧を読み込む場所の真ん中

# 守ってほしいこと
- 点と文字を包む要素に role="status" を付ける。点は aria-hidden="true" にして、文字で「読み込み中」と伝える
- 画面の外にある間は止める（IntersectionObserver。root: document を付ける）
- 動きを控える設定では跳ねさせず、止まった点と文字だけにする

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

読み込みや送信、AIの返事を待つ間の動きを14種類の型に分け、AIへの指示文・動く見本・コードを載せています。見本の下で時間や大きさを変えると、指示文とコードも同じものに変わります。

読み込み中の動きはどの型を選ぶか

まず、進み具合がわかる処理かどうかで分けます。わからないなら点・棒・流れる帯で「止まっていない」ことだけを伝え、わかるなら帯や輪で何%かを見せます。そのうえで、待たせる場所（押したボタンの中・画面の上の端・ページ全体）と、AIの返事のように中身が少しずつ届くものかどうかで選びます。

こんなとき 向いている動き 近い型（ほかのページ）
数秒で終わるが、終わるまでの時間が読めない3つの点が順に跳ねる（ドットローダー）ローディングスピナー
音声や動画を扱う画面で待たせたい縦の棒が順に伸び縮みする（バーローダー）—
一覧や表の上で、場所を取らずに待たせたい細い帯の中を筋が流れ続ける（インジケーター）スケルトンスクリーン
ファイルの送信など、どこまで進んだかがわかる進み具合を帯と数字で見せる（プログレスバー）—
カードの中など狭い場所で、何%かを見せたい輪が埋まって真ん中に数字（円形プログレス）—
送信ボタンを押したあと、二重に送らせたくない押したボタンの中で待たせる（ボタンローディング）フォーム
中身を差し替える画面で、ページを覆わずに伝えたい画面の上の端を細い線が伸びる（トップローディングバー）—
ふだんは数秒だが、ときどき10秒を超える長引いたら文言を変える（待ち時間メッセージ）—
写真の多いトップページで、組み上がる途中を見せたくない読み終わるまで幕で覆う（ローディング画面）オープニングアニメーション
ページを移るたびに、幕とロゴを短く見せたいロゴトランジション（画面の切り替えの動き）—
AIの返事を待つ数秒を、静かに見せたい「考えています」の上を光が流れる（シマーテキスト）—
AIが段を踏んで作業し、いまどこかを見せたいいまの作業を段ごとに実況する（作業の実況）—
チャットで相手が返事を書いている吹き出しの中で「…」が弾む（タイピングインジケーター）—
AIの長い返事を、届いた分から見せたい返事が届いた順に流れ出る（ストリーミング表示）タイプライター
AIが考えた過程も、読みたい人だけ読めるようにしたい考えた過程を折りたたんで残す（思考の折りたたみ）—

ローディング画面とオープニングアニメーションは、どちらもページを開いたときの動きです。ローディング画面は読み込みを待つ間を幕で覆う型で、オープニングアニメーションは読み終わったあとに見出しや写真を順に出す型です。ストリーミング表示とタイプライターも似て見えますが、タイプライターは決まった文を時間で区切って見せる演出で、ストリーミング表示は届いた順に出すだけで、わざと遅らせません。

どの型でも守ること

  1. すぐ終わる処理では出さない。0.3秒ほど待ってから出すと、すぐ終わる処理で読み込み中の表示が一瞬だけ出て、画面がちらつくことがありません。
  2. 動きだけで伝えない。「読み込み中」「送信中…」などの文字を添え、role="status"（進み具合は role="progressbar" と aria-valuenow）で読み上げにも伝えます。読ませるのは変わったときだけにします。
  3. 進み具合と段は、本当の処理から届いたものだけで動かす。時間で勝手に進めると、止まったときに表示だけが先へ行き、嘘だとわかったときの落胆が大きくなります。
  4. 終わったら外し、画面の外では止める。くり返す動きは読み込みの間だけにし、画面の外にある間は IntersectionObserver で止めます。
  5. 動きを控える設定では止めて、文字で示す。点や輪は止まった形にし、文字だけで伝わるようにします（見本の「動きを控える設定で見る」で確かめられます）。

よくある質問 (FAQ)

出てくる中身の形がわかるか、進み具合がわかるかで分けます。一覧やカードのように形がわかっているならスケルトンスクリーンで形を先に見せ、形も進み具合もわからないならスピナーや3つの点で「止まっていない」ことを伝えます。ファイルの送信のように進み具合がわかるなら、プログレスバーや円形プログレスで何%かを見せます。AIの返事のように中身が少しずつ届くものは、ストリーミング表示で届いた分から見せるのがいちばん待たせません。

0.3秒より早く終わるなら、出さないほうが落ち着きます。一瞬だけ点や輪が出て消えると、画面がちらついて見えます。ここのコードは、0.3秒ほど待っても終わらないときだけ出すように書いています。ただしボタンの二重押しを防ぐことは、見た目を変える前に、押した瞬間から始めます。

本当の処理の段に合わせて進めてください。段の表示は「いま何をしているか」を約束するものなので、時間で進めると、処理が止まっているのに表示だけが「まとめています」まで進むことがあります。期待させたぶん、嘘だとわかったときの落胆が大きくなります。処理から段の知らせを受け取れないなら、段を出さずにシマーテキストのような「考えています」だけにします。

いつ出していつ外すかと、読み上げへの伝え方です。「ローディングを付けて」だけだと、一瞬で終わる処理でも毎回出る作りや、終わっても動き続ける作り、動くだけで読み上げでは何も伝わらない作りになりがちです。ここの指示文は、出すまで待つ時間・何をきっかけに進めて終えるか・role="status" で何を読ませるかを書き、Progress Bar や Streaming Text のような英語の一般名も添えています。