Components
Loading preview...
Here is Animated Progress Bar component
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/animated-progress-bar"use client"
import { useState } from "react"
import AnimatedProgressBar from "@/components/ui/animated-progress-bar"
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>
)
}