حلقهی پیشرفت
progress-ringانیمیشنحلقهی SVG که با ورود به دید پر میشود؛ درصد فارسی وسط آن.
۰٪هدف ماهانه
نصب
با CLI
اگر هنوز init نکردهاید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور قطعه و وابستگیهایش را مینویسد.
$ npx vibefarsi add progress-ringنصب دستی
محتوای تب «کد» را در
components/animations/progress-ring.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { ProgressRing } from "@/components/animations/progress-ring"23<ProgressRing value={72} label="هدف ماهانه" />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| value | number | - | درصد ۰ تا ۱۰۰. |
| size / stroke | number | 96 / 8 | قطر و ضخامت. |