3つのドットが順番に跳ねるローダー。animation-delayをずらすだけで「順番に動く」リズムが生まれます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
3つのドットは同じアニメーションを共有し、:nth-child()でanimation-delayを0.15秒ずつずらしているだけです。この「同じ動き+時間差」はスタッガー（stagger）と呼ばれ、CSSアニメーションで律動感を出す基本テクニックです。0%と100%を同じ状態にするとループの継ぎ目が見えなくなります。
reduced-motion時は跳ねる動きをやめ、その場で明滅する控えめな表現に差し替えています。
3つのドットが順番にぽんぽん跳ねるローディングインジケータをCSSだけで作って。animation-delayで各ドットをずらして。
ドットローダーの動きを「跳ねる」から「大きさが脈打つ」に変えて。scaleとopacityのkeyframesで。
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。