ローディングスピナーSpinner

「ローディングスピナー（Spinner）」を実装してください。

## これは何か
処理が続いていることを、回り続ける印で示す部品。終わりが読めない待ち時間に使う。

## 使いどころ
- 通信の応答を待っているとき
- 処理の残り時間が分からないとき

## 実装の要件
- 回転は CSS の animation。文字の「読み込み中」を必ず添える
- prefers-reduced-motion で animation を止める
- 1秒未満で終わる処理には出さない。ちらついて逆に遅く感じる
- 10秒を超えるなら、何をしているかの文言を添える。回っているだけでは不安になる
- 画面全体を覆うと、他の操作ができなくなる。範囲を絞る

## アクセシビリティの要件
- role="status" の要素に「読み込み中」の文字を入れる。回る絵だけでは伝わらない
- 回る部分は aria-hidden="true" にする
- prefers-reduced-motion が指定されていたら、回転を止めて文字で示す

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<div class="x-spinner" role="status">
  <span class="x-spinner__c" aria-hidden="true"></span>
  <span class="x-spinner__t">読み込み中</span>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-spinner,
.x-spinner *:not([class*="fa-"]),
.x-spinner *:not([class*="fa-"])::before,
.x-spinner *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-spinner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.x-spinner__c {
  width: 22px;
  height: 22px;
  border: 3px solid #e3e6ea;
  border-top-color: #1d4ed8;
  border-radius: 50%;
  animation: x-spinner-turn 0.8s linear infinite;
}
.x-spinner__t {
  font-size: 12.5px;
  color: #606a7b;
}
@keyframes x-spinner-turn {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .x-spinner__c {
    animation: none;
  }
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。