Progress

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

Import

import { Progress } from '@akitectio/aki-ui'

Basic Usage

<div className="space-y-4">
  <Progress value={33} className="w-full" />
  <Progress value={66} className="w-full" />
  <Progress value={100} className="w-full" />
</div>

With Size

<div className="space-y-4">
  <Progress value={50} size="sm" className="w-full" />
  <Progress value={50} size="md" className="w-full" />
  <Progress value={50} size="lg" className="w-full" />
</div>

With Colors

<div className="space-y-4">
  <Progress value={50} className="w-full" />
  <Progress value={50} className="w-full [&>*]:bg-green-500" />
  <Progress value={50} className="w-full [&>*]:bg-red-500" />
  <Progress value={50} className="w-full [&>*]:bg-yellow-500" />
</div>