Data & Status

Circular Progress Meter

기본 호와 보조 호가 값 변화에 맞춰 움직이는 원형 게이지입니다.

Preview

data structure

Circular Progress

adjust progress manually

68

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/r/animated-circular-progress-bar.json

Code

typescript
Copied
1import { AnimatedCircularProgressBar } from "@/components/animated-circular-progress-bar"23export default function Example() {4  return (5    <AnimatedCircularProgressBar6      value={75}7      gaugePrimaryColor="#18181b"8      gaugeSecondaryColor="#e4e4e7"9    />10  )11}

Props

PropTypeDefaultDescription
valuenumber0Current value to display.
minnumber0Minimum gauge value.
maxnumber100Maximum gauge value.
gaugePrimaryColorstring-Primary progress stroke color.
gaugeSecondaryColorstring-Secondary track stroke color.
classNamestring-Additional classes merged onto the component.

Reference

Reference Circular Progress Meter