最も定番のローディングスピナー。border+border-radius+rotateの3点セットで、画像なしの数行で実装できます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
正方形にborder-radius: 50%で円を作り、4辺のボーダーのうち上辺だけ色を変えて回転させると「欠けたリングが回っている」ように見えます。イージングは必ずlinear（等速）にします——easeだと回転にムラが出て酔うような動きになります。role="status"を付けるとスクリーンリーダーに読み込み中と伝わります。
prefers-reduced-motionでは止めるのではなく回転を遅くしています。「読み込み中」という情報自体は伝え続けるための設計です。
CSSだけでリング型のローディングスピナーを作って。border + border-radius + @keyframes rotateで、JSは使わないで。
このスピナーにprefers-reduced-motionへの配慮を入れて。動きを減らす設定のときは回転を止めて静的な表示にして。
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。