BasicAnimated Progress Bar

Animated Progress Bar

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

Progress: 40%
Custom Color

Code

1

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="relative 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>
      </div>
    </div>
  )
}

Props

PropTypeDefault
value
number
-
label?
string
-
color?
string
#6366f1
className?
string
-
barClassName?
string
-
labelClassName?
string
-