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