Progress

進捗バー。ラベルと値の表示を組める。

0〜100 の進捗を示すバーです。Progress の中にラベルや値を置くと、バーはその下に自動で描かれます。

export const client = "only";

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="flex w-80 flex-col gap-6">
      <Progress value={64}>
        <ProgressLabel>取り込み中</ProgressLabel>
        <ProgressValue className="ml-auto" />
      </Progress>
      <Progress value={100} />
    </div>
  );
}

import {
  Progress,
  ProgressTrack,
  ProgressIndicator,
  ProgressLabel,
  ProgressValue,
} from "@squadbase/vantage/ui";

パーツ

パーツ	役割
`Progress`	全体。`value`（`null` で不定）
`ProgressLabel`	見出し
`ProgressValue`	現在値。既定でパーセント表示
`ProgressTrack` / `ProgressIndicator`	バー本体。`Progress` が自動で描くので、普段は書かない

進捗の総量が分からないときは value={null} にすると不定表示になります。読み込み中を示したいだけなら Skeleton や Spinner の方が適しています。