# リングスピナーのCSSアニメーション実装

> 最も定番のローディングスピナー。border+border-radius+rotateの3点セットで、画像なしの数行で実装できます。

- カテゴリ: ローディング
- URL: https://www.css-dictionary.com/animations/spinner-ring/

## HTML

```html
<div class="spinner" role="status" aria-label="読み込み中"></div>
```

## CSS

```css
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e2d8c2;
  border-top-color: #c2452f;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { rotate: 1turn; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2s;
  }
}
```

## 仕組みの解説

正方形にborder-radius: 50%で円を作り、4辺のボーダーのうち上辺だけ色を変えて回転させると「欠けたリングが回っている」ように見えます。イージングは必ずlinear（等速）にします——easeだと回転にムラが出て酔うような動きになります。role="status"を付けるとスクリーンリーダーに読み込み中と伝わります。

## 実装のポイント

prefers-reduced-motionでは止めるのではなく回転を遅くしています。「読み込み中」という情報自体は伝え続けるための設計です。

## 使っているプロパティ

- [animation](https://www.css-dictionary.com/property/animation.md)
- [keyframes](https://www.css-dictionary.com/property/keyframes.md)
- [border](https://www.css-dictionary.com/property/border.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)