seamui

Progress

Shows the completion of a task. The fill eases smoothly as the value changes.

x
tsx
"use client"

import * as React from "react"

import { Progress } from "@/registry/seam/ui/progress"

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

  React.useEffect(() => {
    const id = setInterval(() => setValue((v) => (v >= 100 ? 0 : v + 20)), 1200)
    return () => clearInterval(id)
  }, [])

  return <Progress value={value} className="w-64" />
}
bunx --bun @seamui/cli@latest add progress

Notes

  • The indicator width eases with a duration (a layout dimension, like accordion height) so the fill glides between values rather than jumping.
  • Exposes role="progressbar" with aria-valuenow/min/max; set value={null} for an indeterminate state.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.