Progress

The progress bar, with optional label and value.

A bar for 0–100 progress. Put a label or value inside Progress and the bar is drawn beneath them automatically.

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";

Parts

Part	Role
`Progress`	The root. `value` (`null` for indeterminate)
`ProgressLabel`	The heading
`ProgressValue`	The current value, as a percentage by default
`ProgressTrack` / `ProgressIndicator`	The bar itself — `Progress` renders these for you

Pass value={null} when the total isn’t known. If you only mean “loading”, Skeleton or Spinner says it better.