GitHub

Progress

PreviousNext

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

"use client";
 
import { useEffect, useState } from "react";
import { Progress } from "@/components/ui/progress";
 
export function ProgressDemo() {
  const [progress, setProgress] = useState(13);
 
  useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500);
    return () => clearTimeout(timer);
  }, []);
 
  return <Progress className="w-[60%]" value={progress} />;
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/progress"

Usage

import { Progress } from "@/components/ui/progress";
<Progress value={33} />