---
title: "プログレスインジケーター"
description: "タスクがどこまで進んだかを、進み具合が分からないときは進行中であることを、バーまたはリングで示します。"
url: "https://tanrei.chnotchy.com/ja/components/progress-indicator/"
last_updated: 2026-10-23T21:17:12.000Z
---

# プログレスインジケーター

> タスクがどこまで進んだかを、進み具合が分からないときは進行中であることを、バーまたはリングで示します。

## 概要

### 使い方

Web と React の例は現在の仕様に沿っています。SwiftUI、Compose、Flutter、React Native は追従待ちで、まだ `separation` がありません。これらの例は、いま提供しているものを示しています。

**Web**

```html
<tanrei-progress-indicator value="0.4" label="report.pdf をアップロード中"></tanrei-progress-indicator>
<tanrei-progress-indicator value="3" max="10" value-text="10 件中 3 件" label="アップロード中"></tanrei-progress-indicator>

<!-- value がなければ、value のない <progress> と同じく不確定です。 -->
<tanrei-progress-indicator variant="circular" size="small" label="同期中"></tanrei-progress-indicator>

<!-- デザインシステムの選択にかかわらず、インジケーターとトラックの残りの間に間隔を空けます。 -->
<tanrei-progress-indicator separation="gap" value="0.4" label="report.pdf をアップロード中"></tanrei-progress-indicator>

<script type="module">
  import '@tanrei/web/components/progress-indicator';
  const bar = document.querySelector('tanrei-progress-indicator');
  bar.value = sent / total;
</script>
```

**React**

```tsx
import { ProgressIndicator } from '@tanrei/react';

<ProgressIndicator value={sent / total} label="report.pdf をアップロード中" />
<ProgressIndicator value={files} max={10} valueText={`10 件中 ${files} 件`} label="アップロード中" />
<ProgressIndicator variant="circular" size="small" value={null} label="同期中" />
<ProgressIndicator separation="gap" value={sent / total} label="report.pdf をアップロード中" />
```

**SwiftUI**

```swift
import Tanrei

TanreiProgressIndicator("report.pdf をアップロード中", value: sent / total)
TanreiProgressIndicator("アップロード中", value: Double(files), in: 0...10, currentValueLabel: "10 件中 \(files) 件")

// value を渡さなければ（既定値）不確定です。
TanreiProgressIndicator("同期中", variant: .circular, size: .small)
```

**Compose**

```kotlin
import io.github.chnotchy.tanrei.components.TanreiProgressIndicator
import io.github.chnotchy.tanrei.components.TanreiProgressIndicatorVariant
import io.github.chnotchy.tanrei.tokens.TanreiProgressIndicatorSize

// progress はラムダなので、値が変わっても再コンポーズせずに描き直します。
TanreiProgressIndicator(progress = { sent / total }, contentDescription = "report.pdf をアップロード中")
TanreiProgressIndicator(
    progress = { files.toFloat() },
    contentDescription = "アップロード中",
    valueRange = 0f..10f,
    stateDescription = "10 件中 $files 件",
)

// progress を取らないオーバーロードが不確定です。
TanreiProgressIndicator(
    contentDescription = "同期中",
    variant = TanreiProgressIndicatorVariant.Circular,
    size = TanreiProgressIndicatorSize.Small,
)
```

**Flutter**

```dart
import 'package:tanrei/tanrei.dart';

TanreiProgressIndicator(value: sent / total, semanticsLabel: 'report.pdf をアップロード中');
TanreiProgressIndicator(
  value: files.toDouble(),
  max: 10,
  semanticsValue: '10 件中 $files 件',
  semanticsLabel: 'アップロード中',
);

// value: null（既定値）は不確定です。
const TanreiProgressIndicator(
  variant: TanreiProgressIndicatorVariant.circular,
  size: TanreiProgressIndicatorSize.small,
  semanticsLabel: '同期中',
);
```

**React Native**

```tsx
import { ProgressIndicator } from '@tanrei/react-native';

<ProgressIndicator accessibilityLabel="report.pdf をアップロード中" value={sent / total} />
<ProgressIndicator accessibilityLabel="アップロード中" value={files} max={10} valueText={`10 件中 ${files} 件`} />
<ProgressIndicator accessibilityLabel="同期中" variant="circular" size="small" />
```

## 仕様

- Category: Communication
- Level: base
- Listing: default
- Page: https://tanrei.chnotchy.com/components/progress-indicator/
- Spec: https://github.com/chnotchy/tanrei/blob/main/specs/progress-indicator.spec.json

### Availability

| Design system | Has it | Notes |
| --- | --- | --- |
| Tanrei (`tanrei`) | Yes | — |
| Cupertino (Apple HIG-inspired) (`cupertino`) | Yes | — |
| M3 Expressive-like (Material 3 Expressive-inspired) (`m3-expressive-like`) | Yes | — |
| M3-like (Material 3-inspired) (`m3-like`) | Yes | — |

### Platforms

- Web: the element `<tanrei-progress-indicator>`, registered by importing `@tanrei/web` (or only its own module, `@tanrei/web/components/progress-indicator`).
- React: `ProgressIndicator` from `@tanrei/react`.

| Platform | Name | Status |
| --- | --- | --- |
| Web | `tanrei-progress-indicator` | lagging |
| SwiftUI | `TanreiProgressIndicator` | lagging |
| Jetpack Compose | `TanreiProgressIndicator` | lagging |
| Flutter | `TanreiProgressIndicator` | lagging |
| React Native | `ProgressIndicator` | lagging |

Names a platform gives in its own idiom:

| Spec | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
| --- | --- | --- | --- | --- | --- |
| `value` (prop) | `value` | `value` | `progress` | `value` | `value` |
| `min` (prop) | `min` | `bounds` | `valueRange` | `min` | `min` |
| `max` (prop) | `max` | `bounds` | `valueRange` | `max` | `max` |
| `label` (prop) | `label` | `label` | `contentDescription` | `semanticsLabel` | `accessibilityLabel` |
| `valueText` (prop) | `valueText` | `currentValueLabel` | `stateDescription` | `semanticsValue` | `valueText` |

Statuses: `planned` — In the inventory. Nothing shippable exists yet. `lagging` — An implementation of an earlier spec exists; it has not caught up with the current one. `alpha` — Implemented with tests. The API may still change. `beta` — Feature complete and at parity. Only fixes are expected. `stable` — Covered by semantic versioning. `deprecated` — Still shipped; scheduled for removal.

### Anatomy

- `track`: The full length of the bar, or the full circle of the ring: the whole of the task.
- `indicator`: The part of the track drawn in the indicator color: the fraction done (determinate), or a moving segment or arc (indeterminate). It meets the rest of the track, or stands a gap from it (separation).
- `stop-indicator` (optional): A dot at the end of a determinate bar's track that marks where the task ends. Drawn under either separation whenever its size is above 0; 0 draws none.

### Props

| Prop | Type | Default | Web attribute | Description |
| --- | --- | --- | --- | --- |
| `variant` | `enum`: `linear`, `circular` | `"linear"` | `variant` | Linear is a bar that fills the width its layout gives it, for content and pages; circular is a ring of a fixed size, for tight places and next to text. A structural choice drawn by code, not a token axis: a design system cannot add a form by values. |
| `size` | `enum`: `small`, `medium`, `large` | `"medium"` | `size` | The bar's thickness (2 / 4 / 8) or the ring's box (16 / 24 / 40). A design system may add values. |
| `separation` | `enum`: `auto`, `divider`, `gap` | `"auto"` | `separation` | How a determinate indicator is told from the rest of its track. divider: it is drawn on the track with no space between them. gap: empty space is left between them. Whether a bar marks the track's end with a dot is comp.progress-indicator.stop-indicator.size, not the separation. Auto takes comp.progress-indicator.track.separation, the design system's answer (divider in the default system). |
| `value` | `number` | — | `value` | How far the task has come, between min and max. Null makes the indicator indeterminate. |
| `min` | `number` | `0` | `min` | The value at which nothing is done. |
| `max` | `number` | `1` | `max` | The value at which the task is done. |
| `label` | `string` | `""` | `label` | The accessible name: what is in progress ("Uploading report.pdf"). Required: a bar alone is not a name. |
| `valueText` | `string` | `""` | `value-text` | How assistive technology reads the value when a percentage is not the natural reading ("3 of 10 files"). Empty reads the platform's percentage. |

### States

`enabled`

### Accessibility

- Role: `progressbar`
- Labeling: label is the accessible name. valueText, when given, replaces the platform's percentage as the spoken value. A visible caption next to the indicator is the product's composition; when it exists, use the same words as label.
- Minimum target size: yes

- Not interactive: the indicator takes no input and is never focusable (PRG-10), so the minimum target holds without extending anything.
- The value is read from the boundary between indicator and track: comp.progress-indicator.indicator.color must stay at least 3:1 against comp.progress-indicator.track.color and against the surface behind it, under divider and under gap alike. A faint track may leave the track's end hard to see; the stop indicator, in a system that gives it a size, marks it.
- Indeterminate is announced as busy with no value: on the web a progressbar without aria-valuenow (and aria-busy), on Apple platforms a progress element with no value, on Android the indeterminate range info, in Flutter a progress indicator with a null value.
- Reduced motion replaces movement with an opacity pulse of at most one per second (PRG-7), below the three-per-second flash threshold.

### Behaviour

Requirements in EARS form, each with its stable id.

- **PRG-1** WHILE value is a number THE progress indicator SHALL be determinate and draw the indicator over the fraction (value − min) / (max − min) of the track, from the track's start: the inline-start of a bar, the top of a ring, turning clockwise.
- **PRG-2** WHILE value is null THE progress indicator SHALL be indeterminate: a bar SHALL move a segment of the indicator, two fifths of the track long, from beyond the track's start to beyond its end once per comp.progress-indicator.motion.cycle-duration with comp.progress-indicator.motion.cycle-easing; a ring SHALL turn an arc of the indicator a quarter of the circle long clockwise once per comp.progress-indicator.motion.cycle-duration at constant speed (sys.motion.easing.linear).
- **PRG-3** THE progress indicator SHALL draw a bar comp.progress-indicator.linear.thickness.medium high for medium (and so on for each size) across the full inline size its layout gives it, and a ring whose outer edge fills a comp.progress-indicator.circular.size.medium square with a stroke of comp.progress-indicator.circular.thickness.medium for medium (and so on for each size).
- **PRG-4** THE progress indicator SHALL draw the track in comp.progress-indicator.track.color and the indicator over it in comp.progress-indicator.indicator.color; the ends of a bar's track and indicator SHALL be rounded by comp.progress-indicator.track.shape, clamped to half the thickness, and a ring's arcs SHALL have round caps unless comp.progress-indicator.track.shape is sys.shape.corner.none.
- **PRG-5** WHILE determinate, its separation is gap (PRG-17) and value lies strictly between min and max THE progress indicator SHALL leave comp.progress-indicator.track.gap of empty space, measured along the track, between the indicator and the rest of the track — on a bar between the indicator's end and the track, on a ring at both ends of the indicator's arc. WHILE its separation is divider THE progress indicator SHALL draw the indicator on the track with no empty space between them: the edge where the indicator's color ends is what divides them. WHILE a bar is determinate THE progress indicator SHALL draw, under either separation, a dot of comp.progress-indicator.stop-indicator.size, and no larger than the bar is thick, in comp.progress-indicator.indicator.color centered in the thickness with its center half the thickness before the track's end (concentric with the track's rounded end); it SHALL NOT be drawn while value is at max, where the indicator covers it, and a size of 0 SHALL draw none. Whether the dot is drawn is independent of the separation.
- **PRG-6** WHEN value changes while determinate THE progress indicator SHALL move the indicator's end to the new value over comp.progress-indicator.motion.value-duration with comp.progress-indicator.motion.value-easing; a switch between determinate and indeterminate SHALL take effect at once.
- **PRG-7** WHERE reduced motion is requested THE progress indicator SHALL show a value change at once, and WHILE indeterminate SHALL NOT move: it SHALL draw the indicator over the whole track (the whole circle of a ring) and ease its opacity from 1 to 0 and back to 1 once per comp.progress-indicator.motion.cycle-duration with comp.progress-indicator.motion.cycle-easing, over a track that stays still.
- **PRG-8** WHILE value is a number THE progress indicator SHALL expose the progressbar role to assistive technology with label as its name, min and max as its range, the clamped value as its current value, and valueText as the value's text when valueText is not empty.
- **PRG-9** WHILE value is null THE progress indicator SHALL expose the progressbar role with label as its name, no current value, and the platform's busy or indeterminate state.
- **PRG-10** THE progress indicator SHALL NOT be focusable and SHALL NOT announce value changes by itself; assistive technology SHALL read the current value when it reaches the indicator, and a platform that marks frequently updating elements SHALL mark it so.
- **PRG-11** IF value is below min or above max THE progress indicator SHALL draw and expose it clamped to that range; IF max is not greater than min THE progress indicator SHALL draw the track with no indicator and expose a current value of 0 in a range of 0 to 1; in each case debug builds SHALL report the values.
- **PRG-12** WHEN size names a value that the active design system does not have, or variant or separation a value the component does not define, THE progress indicator SHALL render with the default value's tokens (medium, linear, auto), and in debug builds report the unknown value.
- **PRG-13** WHERE the layout direction is right-to-left THE progress indicator SHALL fill a bar and move its indeterminate segment from right to left; a ring SHALL NOT be mirrored: it starts at the top and turns clockwise in every direction, as a clock does.
- **PRG-14** WHILE the progress indicator is not visible (scrolled out of view, in a hidden view, or in an app in the background) THE progress indicator SHALL NOT run its indeterminate animation, and SHALL resume it when it becomes visible.
- **PRG-15** WHILE label is empty THE progress indicator SHALL still render, and in debug builds report that it has no accessible name.
- **PRG-16** THE progress indicator SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the progress indicator is shown THE progress indicator SHALL draw itself for the new direction at once, without a motion of its own, keeping its value, and the place of an indeterminate segment in its cycle.
- **PRG-17** THE progress indicator SHALL tell a determinate indicator from the rest of its track as its separation names: WHILE separation is auto, as comp.progress-indicator.track.separation names, which follows sys.behavior.separation unless a design system sets it apart; WHILE separation is divider or gap, as that value names, whatever the tokens say; each as PRG-5 draws it. WHEN separation, or the token it follows, changes THE progress indicator SHALL draw the other form at once, without animation, keeping its value. WHILE indeterminate THE progress indicator SHALL be drawn the same under either (PRG-2, PRG-7). A platform that cannot draw a choice SHALL fall back to the first value, divider, and state that in its README.
- **PRG-18** WHERE the platform has ARIA attributes (the web), the host carries its progressbar role (PRG-8) itself, so what the product writes on it is not moved, but for a name: WHILE label is not empty THE progress indicator SHALL hold the product's aria-label and aria-labelledby on that host as their data-aria- twins, so that label is its whole name although the platform gives aria-labelledby the precedence, and WHEN label is emptied SHALL give them back as they were written; WHILE label is empty a name the product gives so — aria-label, or aria-labelledby naming an element — SHALL be its name and SHALL NOT be reported as having none in debug builds (PRG-15). WHEN the product removes one, or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaLabelledByElements) to null, THE progress indicator SHALL take it away.

### Tokens

As written in the token documents (DTCG): an alias in braces names the token it takes its value from, which each design system resolves. On the web each token is a CSS custom property: `--tanrei` and the name after `tanrei`, joined by hyphens (`tanrei.comp.progress-indicator.…` → `--tanrei-comp-progress-indicator-…`).

#### `tanrei.comp.progress-indicator`

| Token | Type | Value |
| --- | --- | --- |
| `comp.progress-indicator.linear.thickness.small` | `dimension` | `2px` |
| `comp.progress-indicator.linear.thickness.medium` | `dimension` | `4px` |
| `comp.progress-indicator.linear.thickness.large` | `dimension` | `8px` |
| `comp.progress-indicator.circular.size.small` | `dimension` | `16px` |
| `comp.progress-indicator.circular.size.medium` | `dimension` | `24px` |
| `comp.progress-indicator.circular.size.large` | `dimension` | `40px` |
| `comp.progress-indicator.circular.thickness.small` | `dimension` | `{tanrei.sys.border.thick}` |
| `comp.progress-indicator.circular.thickness.medium` | `dimension` | `{tanrei.sys.border.thick}` |
| `comp.progress-indicator.circular.thickness.large` | `dimension` | `{tanrei.sys.border.thick}` |
| `comp.progress-indicator.track.color` | `color` | `{tanrei.sys.color.surface-variant}` |
| `comp.progress-indicator.track.shape` | `dimension` | `{tanrei.sys.shape.corner.full}` |
| `comp.progress-indicator.track.separation` | `number` | `{tanrei.sys.behavior.separation}` |
| `comp.progress-indicator.track.gap` | `dimension` | `{tanrei.sys.space.space50}` |
| `comp.progress-indicator.indicator.color` | `color` | `{tanrei.sys.color.primary}` |
| `comp.progress-indicator.stop-indicator.size` | `dimension` | `{tanrei.sys.space.space0}` |
| `comp.progress-indicator.motion.value-duration` | `duration` | `{tanrei.sys.motion.duration.medium2}` |
| `comp.progress-indicator.motion.value-easing` | `cubicBezier` | `{tanrei.sys.motion.easing.standard}` |
| `comp.progress-indicator.motion.cycle-duration` | `duration` | `{tanrei.sys.motion.duration.extra-long4}` |
| `comp.progress-indicator.motion.cycle-easing` | `cubicBezier` | `{tanrei.sys.motion.easing.standard}` |

## ガイドライン

### 使う場面

待っていることに気付く程度の時間がかかるタスクに使います。アップロード、インポート、デプロイ、時間のかかる保存などです。おおよそでも測れるなら、どこまで進んだかを示します。バーが進んでいると、人は落ち着いて待てます。まだ測れないときは不確定で表示し、値が分かった時点で切り替えます。

次のページを読み込んでいるリストのように、長さを測れない短い待ち時間には、代わりに[ローディングインジケーター](https://tanrei.chnotchy.com/ja/components/loading-indicator/)を使います。値を約束しないので、トラックを持ちません。

### バリアントの選び方

| バリアント | 用途 |
| --- | --- |
| Linear | ページやセクションに属するタスク。ページの上端、カードの中、アップロード一覧のファイルの下など。バーはレイアウトが与える幅いっぱいに伸びます。 |
| Circular | 狭い場所や、テキストの横での進捗。ボタンの中、リストの行、小さなパネルなど。リングの大きさは固定です。 |

### サイズの選び方

| サイズ | 既定のシステムでのバーの太さ / リングの大きさ | 用途 |
| --- | --- | --- |
| Small | 2 / 16 | 密度の高い行、コントロールの中、小さなテキストの横。 |
| Medium | 4 / 24 | ほとんどの場所。既定値です。 |
| Large | 8 / 40 | その画面の主役であるタスクや、内容を待っている空のセクション。 |

### 区切り線か間隔か

確定のインジケーターをトラックの残りと見分ける方法は 2 つあります。`divider` では、インジケーターをトラックの上に、間を空けずに描きます。`gap` では、インジケーターのあとに少しだけ間隔を空けます。リングでは弧の両端に空けます。不確定のインジケーターは、どちらでも同じ見た目です。バーがトラックの終わりを点で示すかどうかは別の選択で、ストップインジケーターの大きさで決まります。大きさを与えたデザインシステムでは、どちらの区切り方でも点を描きます。既定のシステムでは描きません。

この選択は、デザインシステムが、同じ選択を持つすべてのコンポーネントについて一度だけ行います。既定のシステムは divider です。`separation` を `auto` のままにしておけば、その選択に従うので、周りのボタングループやメニューとそろいます。1 つのインジケーターだけを変える理由があるときに限り、`divider` か `gap` を指定します。

### 推奨

- 何が進行中なのかを表すラベルを付けます。「進捗」ではなく「report.pdf をアップロード中」です。横にキャプションを表示するなら、同じ言葉を使います。
- パーセントが自然な読み方でないときは、値のテキストを使います。「10 件中 3 件」「ステップ 2/4」などです。
- タスクが終わったら、言葉で伝えます。完了したというメッセージか、何がうまくいかず次に何をすればよいかです。

### 非推奨

- 失敗を色で伝えない。赤いバーは、その色が見えない人には何も伝えません。インジケーターを止めて、横にメッセージを表示します。
- ストレージの使用量やパスワードの強度のような、量の目盛りとして使わない。それは[メーター](https://tanrei.chnotchy.com/ja/components/meter/)という別のコンポーネントです。
- タスクが終わる前に値を戻したり、最後まで飛ばしたりしない。バーは残りの待ち時間についての約束です。
- 1 つのタスクに複数のインジケーターを出さない。全体に 1 つ、または利用者が気にかける項目ごとに 1 つにします。

## アクセシビリティ

### コンポーネントが担うこと

- プログレスバーのロールと、名前としてのラベルを伝えます。確定のときは範囲、範囲内に収めた現在の値、値のテキスト（あれば）を、不確定のときは値を伝えずにプラットフォームのビジー状態を伝えます。Flutter にはまだプログレスバーのロールもビジー状態もないため、ラベルと値を伝えます。
- フォーカスを受けず、変化を自分から読み上げません。支援技術は、利用者がたどり着いたときに現在の値を読み上げます。
- 動きを減らす設定のときは、値の変化をすぐに反映し、不確定の表示は動きを止めて、代わりに不透明度をゆるやかに変化させます（1 秒に 1 回まで）。
- 繰り返すアニメーションは、見えていない間は止まり、見えるようになると再開します。アプリがバックグラウンドにあるときはすべてのプラットフォームで、スクロールして画面外に出たときや隠れた画面にあるときは、プラットフォームがそれを判別できる範囲で止まります。
- 空のラベル、範囲外の値、未知の `separation` は、デバッグビルドで報告します。

### 利用者側で行うこと

- タスクの終わりは、プロダクト側で知らせます。ライブリージョンでメッセージを伝えるか、結果へフォーカスを移します。インジケーターは、完了や失敗を伝えません。
- インジケーターの色、トラックの色、背後のサーフェスの色を変えるときは、divider でも gap でも、インジケーターの色がトラックと背後のサーフェスの両方に対して 3:1 以上になるようにします。値は、インジケーターとトラックの境目から読み取られるからです。
- 塗りつぶしのカードのような、最も高いコンテナのトーンの面の上では、トラックはほぼ同じトーンなので見えにくくなります。そうした面の上に置くときは、レイヤーで `comp.progress-indicator.track.color` をより強いロールに付け替えます。インジケーターが示すものは、それでもトラックとの境目から読み取れます。
- タスクがページの一部を止めている間は、その領域をビジー状態にします（Web では `aria-busy`）。