حلقهی پیشرفت
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 | قطر و ضخامت. |