Animated Circular Progress Bar

A circular progress bar that displays a percentage value. It animates as the value changes. Use it to show progress in a visually engaging way.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/animated-circular-progress-bar

npx layro-cli add @magicuidesign/animated-circular-progress-bar

npx layro-cli add @magicuidesign/animated-circular-progress-bar

bunx layro-cli add @magicuidesign/animated-circular-progress-bar

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import { cn } from "@/lib/utils"

interface AnimatedCircularProgressBarProps {
  max?: number
  min?: number
  value: number
  gaugePrimaryColor: string
  gaugeSecondaryColor: string
  className?: string
}

export function AnimatedCircularProgressBar({
  max = 100,
  min = 0,