Progress Circle

import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCirclePreview() {
  return <ProgressCircle tone="neutral" size="40" />;
}

npx @seed-design/cli@latest add progress-circle

pnpm dlx @seed-design/cli@latest add progress-circle

yarn dlx @seed-design/cli@latest add progress-circle

bun x @seed-design/cli@latest add progress-circle

import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCircleNeutral() {
  return <ProgressCircle tone="neutral" />;
}

import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCircleBrand() {
  return <ProgressCircle tone="brand" />;
}

import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCircleStaticWhite() {
  return (
    <div
      style={{
        display: "flex",
        flex: 1,
        width: "100vw",
        height: "300px",
        alignItems: "center",
        justifyContent: "center",
        background: "black",
      }}
    >
      <ProgressCircle tone="staticWhite" />
    </div>
  );
}

import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCircle40() {
  return <ProgressCircle size="40" />;
}

import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCircle24() {
  return <ProgressCircle size="24" />;
}

import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCircleDeterminate() {
  return <ProgressCircle minValue={0} maxValue={100} value={40} />;
}

import { ProgressCircle } from "seed-design/ui/progress-circle";

export default function ProgressCirclePreview() {
  // if you want to show an indeterminate progress circle, you can pass `undefined` or omit the `value` prop
  return <ProgressCircle value={undefined} />;
}