Data & Status

Circular Progress Meter

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

Preview

data structure

Circular Progress

adjust progress manually

68

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/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

value

Type
number
Default
0
Description
Current value to display.

min

Type
number
Default
0
Description
Minimum gauge value.

max

Type
number
Default
100
Description
Maximum gauge value.

gaugePrimaryColor

Type
string
Default
-
Description
Primary progress stroke color.

gaugeSecondaryColor

Type
string
Default
-
Description
Secondary track stroke color.

className

Type
string
Default
-
Description
Additional classes merged onto the component.

Reference

Reference Circular Progress Meter