Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

"use client";

import * as React from "react";
import { Progress } from "@/components/ui/progress";

export default function ProgressDemo() {
  const [progress, setProgress] = React.useState(13);

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500);
    return () => clearTimeout(timer);
  }, []);

  return <Progress value={progress} css={{ w: "60%" }} />;
}

Installation

npx nore-ui-cli@latest add progress

Usage

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

<Progress value={33} />