Progress

Used to show the percentage completion of a data loading.

10%

"use client"

import { useEffect, useState } from "react"

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

export function Demo() {
  const [progress, setProgress] = useState(10)

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((p) => (p >= 100 ? 0 : p + 10))
    }, 1000)

    return () => clearInterval(timer)
  }, [])

  return (
    <div className="w-[300px] space-y-4">
      <Progress value={progress} />
      <p className="text-sm text-zinc-400">{progress}%</p>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add https://ebonui.com/r/progress.json

Usage

    <div className="w-[300px] space-y-4">
      <Progress value={progress} />
      <p className="text-sm text-zinc-400">{progress}%</p>
    </div>

Popover Radio Group

On This Page

Installation Usage

Support Ebon UI by giving it a star on GitHub!

A lot of work goes into maintaining and improving Ebon UI. Your stars help show your support and encourage further development.