elorm/ui

Progress

Displays an indicator showing the completion progress of a task.

Saved preference for elorm init --ui-library base-ui
x
PreviewCode
"use client"

import * as React from "react"

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

export function ProgressDemo() {
  const [value, setValue] = React.useState(18)

  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setValue((current) => (current >= 92 ? 18 : current + 8))
    }, 700)

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

  return <Progress variant="animated" value={value} className="w-full max-w-sm" />
}

Installation#

Usage#

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

Displays an indicator showing the completion progress of a task.

Use for determinate loading states and task completion feedback.

Examples#

Determinate#

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

export function ProgressDemo() {
  return (
    <Progress variant="determinate" value={66} className="w-full max-w-sm" />
  )
}

Compact#

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

export function ProgressDemo() {
  return (
    <Progress variant="compact" value={38} className="w-full max-w-sm" />
  )
}

Labeled#

Uploading72%
x
PreviewCode
import { Progress } from "@/components/ui/progress"

export function ProgressDemo() {
  return (
    <Progress variant="labeled" label="Uploading" value={72} className="w-full max-w-sm" />
  )
}

Animated#

x
PreviewCode
"use client"

import * as React from "react"

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

export function ProgressDemo() {
  const [value, setValue] = React.useState(12)

  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setValue((current) => (current >= 92 ? 18 : current + 8))
    }, 700)

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

  return <Progress variant="animated" value={value} className="w-full max-w-sm" />
}
Navii AvatarSkeleton