Progress

アップロードや取り込みなど、実行中の作業の完了度を示す場合に使います。

プレビュー

割合・件数・待機状態

Registry ビルドの 82%、トークンの 12/16 件、値を待つ進捗表示を比較します。

Registry ビルド82%

テーマトークン12 / 16

データを待機中—

インストール

この Registry を初めて使う場合は、先に基本設定と共通スタイルの導入を完了してください。

npx shadcn@latest add @neumorphism-ui/progress

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

現在の value と全体の max を渡し、aria-label または aria-labelledby で作業名を付けます。実際の作業では表示値を進捗の状態に接続します。

"use client";

import { Progress } from "@/components/ui/progress";

export default function Example() {
  return <Progress value={72} aria-label="File upload" />;
}

API リファレンス

Base UI Progress の progressbar semantics を使用します。有効な max と value を正規化し、value が未指定または無効な場合は indeterminate 状態を公開します。

コンポーネント	プロパティ	型	デフォルト	説明
`Progress`	`value`	`number \| null`	`null`	0 から max の間に正規化される現在の進捗値です。
`Progress`	`max`	`number`	`100`	0より大きい全体範囲です。無効な値の場合は100を使用します。
`Progress`	`aria-label / aria-labelledby`	`string`	`—`	進行中のタスクを表すアクセシブルな名前です。
`Progress`	`getAriaValueText`	`(formattedValue: string, value: number \| null) => string`	`—`	数値以外の説明が必要な場合に aria-valuetext を生成します。

プレビュー

割合・件数・待機状態

インストール

使い方

API リファレンス

アクセシビリティ