ComponentsAnimated Progress Bar

Animated Progress Bar

A progress bar with a smooth fill animation and optional label.

Progress: 40%

Custom Color

Code

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/animated-progress-bar.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/animated-progress-bar-demo.json"

How to use

Demo.tsx

"use client"

import { useState } from "react"

import AnimatedProgressBar from "@/components/smoothui/ui/AnimatedProgressBar"

export default function AnimatedProgressBarDemo() {
  const [value, setValue] = useState(40)
  const [refreshKey, setRefreshKey] = useState(0)
  return (
    <div className="max-w-xs space-y-6">
      <AnimatedProgressBar
        key={refreshKey}
        value={value}
        label={`Progress: ${value}%`}
      />
      <AnimatedProgressBar
        key={refreshKey + 1000}
        value={value}
        color="#22d3ee"
        label="Custom Color"
      />
      <div className="mt-4 flex gap-2">
        <button
          className="bg-background text-foreground rounded border px-4 py-2"
          onClick={() => setValue((v) => (v >= 100 ? 0 : v + 10))}
        >
          Increase
        </button>
        <button
          className="bg-background text-foreground rounded border px-4 py-2"
          onClick={() => setRefreshKey((k) => k + 1)}
        >
          Refresh
        </button>
      </div>
    </div>
  )
}

Props

Prop	Type	Description
value	number	Progress value (0-100).
label?	string	Optional label.
color?	string	Bar color.
className?	string	Class name for the root.
barClassName?	string	Class name for the bar.
labelClassName?	string	Class name for the label.