Progress Indicatorプログレスインジケーター

ユーザーにアプリケーションの待機状態を視覚的に示すためのコンポーネントです。

更新 2025/9/18

サイズ

Circular は Small、Medium、Large の3種類があります。Linear は Medium と Large を使用してください。

Small (Circular)

Medium (Circular)

Large (Circular)

Medium (Linear)

Large (Linear)

import { ProgressIndicator } from "@serendie/ui";
import { css } from "styled-system/css";
import { HBox, VBox } from "src/components/LayoutUtils";

export function SizeSample() {
  return (
    <>
      <HBox>
        <VBox>
          <ProgressIndicator
            type="circular"
            size="small"
            value={30}
            max={100}
          />
          <p>Small (Circular)</p>
        </VBox>
        <VBox>
          <ProgressIndicator
            type="circular"
            size="medium"
            value={60}
            max={100}
          />
          <p>Medium (Circular)</p>
        </VBox>
        <VBox>
          <ProgressIndicator
            type="circular"
            size="large"
            value={90}
            max={100}
          />
          <p>Large (Circular)</p>
        </VBox>
      </HBox>
      <HBox mt="sd.system.dimension.spacing.extraLarge">
        <VBox>
          <ProgressIndicator
            type="linear"
            size="medium"
            value={60}
            max={100}
            className={css({ width: "200px" })}
          />
          <p>Medium (Linear)</p>
        </VBox>
        <VBox>
          <ProgressIndicator
            type="linear"
            size="large"
            value={90}
            max={100}
            className={css({ width: "200px" })}
          />
          <p>Large (Linear)</p>
        </VBox>
      </HBox>
    </>
  );
}

確定値（Determinate）

処理の進捗が数値で把握できる場合に使用します。Linearは横方向に進捗が伸び、Circularは円弧で進捗を示します。値は value / max から算出されます。

Linear (60%)

Circular (60%)

import { ProgressIndicator } from "@serendie/ui";
import { HBox, VBox } from "src/components/LayoutUtils";

export function DeterminateTypeSample() {
  return (
    <HBox w="100%">
      <VBox>
        <ProgressIndicator
          type="linear"
          size="large"
          value={60}
          max={100}
          style={{ width: 280 }}
        />
        <p>Linear (60%)</p>
      </VBox>
      <VBox>
        <ProgressIndicator type="circular" value={60} max={100} size="large" />
        <p>Circular (60%)</p>
      </VBox>
    </HBox>
  );
}

不確定値（Indeterminate）

処理時間が読めない待機状態を示す場合に使用します。Linearはスライドアニメーション、Circularは回転する円弧アニメーションで待機を表現します。

Linear

Circular

import { ProgressIndicatorIndeterminate } from "@serendie/ui";
import { HBox, VBox } from "src/components/LayoutUtils";

export function IndeterminateTypeSample() {
  return (
    <HBox>
      <VBox>
        <ProgressIndicatorIndeterminate
          type="linear"
          size="large"
          style={{ width: 280 }}
        />
        <p>Linear</p>
      </VBox>
      <VBox>
        <ProgressIndicatorIndeterminate type="circular" size="large" />
        <p>Circular</p>
      </VBox>
    </HBox>
  );
}

カラー（Indeterminate）

不確定値では color を Primary と Subtle から選べます。状況に応じて重要度や背景とのコントラストを考慮して使い分けてください。

Circular / Primary

Circular / Subtle

import { ProgressIndicatorIndeterminate } from "@serendie/ui";
import { HBox, VBox } from "src/components/LayoutUtils";

export function IndeterminateColorSample() {
  return (
    <>
      <HBox>
        <VBox>
          <ProgressIndicatorIndeterminate
            type="circular"
            color="primary"
            size="large"
          />
          <p>Circular / Primary</p>
        </VBox>
        <VBox>
          <ProgressIndicatorIndeterminate
            type="circular"
            color="subtle"
            size="large"
          />
          <p>Circular / Subtle</p>
        </VBox>
      </HBox>
    </>
  );
}