---
summary: 読み込み中の待機インジケーター
category: Feedback
---

# Loader

データの読み込みやフォームの送信など、進行中の処理があることを回転するアニメーションで示すコンポーネントです。
完了率を示すことはできず、待ち時間が不特定の処理に使います。

## 基本の使い方

```tsx
import { Loader } from 'wip-ui'

<Loader message="読み込み中..." role="status" />
```

## 使う場面

- API のレスポンス待ちなど、データを読み込んでいることを伝えるとき
- フォームの送信や保存など、処理が終わるまで待ってもらうとき

## 使い方

### 使わない場面

- [avoid] 画面の中だけで完結し、すぐに終わることが分かっている操作には使わない（例：表示の切り替え、読み込み済みのデータの並べ替えや絞り込み）。一瞬だけ表示されると、かえって画面がちらつくため
- [avoid] ボタンのラベルを Loader に置き換えない。何のボタンだったか分からなくなるため。処理中のボタンは、押せない状態にする

### サイズ

- [should] 表示する領域の広さに合わせて size を選ぶ（例：テキストの横なら s、カードの中なら l、ページ全体なら xxl）

### 表示と非表示

- [should] 処理が始まったら表示し、完了したら非表示にする
- [should] 処理が失敗したときは Loader を消し、失敗した理由と次に行うべき操作を伝える

### メッセージ

- [should] 何を読み込んでいるか・何を待っているかを伝えたいときは message で補足する

## アクセシビリティ

- [must] 処理中であることを、読み上げでも伝える

## 実装

- Loader は、読み上げ用の役割（role）やラベルを自動で付けない
- [should] role="status" を指定する。message を表示しない場合は、aria-label="読み込み中" など、何を待っているかが分かるラベルも付ける

## Props（自動生成）

型定義から生成した props の一覧です。react-aria-components から引き継いだ props の説明は英語です。DOM の汎用的な属性・イベントは省略しています。

### Loader

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| size | "s" \| "m" \| "l" \| "xl" \| "xxl" | m | ローダーのサイズ |
| message | string | - | ローダーの下に表示するメッセージテキスト |