Progress

The Progress component is used to visualize the completion status of a task, download, or any process that advances over time. It typically consists of a container or track and a bar that fills up to indicate the current progress.

Installation

Add the Progress component to your project using the OrbitUI CLI:

npx orbitkit@latest add progress

Usage

Import the ProgressContainer and Progress components. Wrap the Progress component inside ProgressContainer. Use the value prop on the Progress component to set the current progress.

Preview

Code

index.astro

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

<ProgressContainer>
  <Progress value={50} />
</ProgressContainer>

The value prop should typically be a number between 0 and 100, representing the percentage of completion.

Props

ProgressContainer

The ProgressContainer component acts as the track or wrapper for the progress bar. This component accepts all the standard HTML attributes that a <div> element would.

Progress

The Progress component represents the filling bar that indicates the current progress level. Accepts all the standard HTML attributes that a <div> element would, and a value number the current progress value. Strictly a number between 0 and 100.