پیشرفت خواندن
scroll-progressانیمیشننوار باریکی بالای صفحه که با اسکرول از راست پر میشه، برای مقاله و مستندات.
برای دیدن نوار، این جعبه را اسکرول کنید.
بند ۱: متن نمونه برای پر کردن جعبه. تا پایین که برسید نوار بالای جعبه کامل میشود و از راست پر شده است.
بند ۲: متن نمونه برای پر کردن جعبه. تا پایین که برسید نوار بالای جعبه کامل میشود و از راست پر شده است.
بند ۳: متن نمونه برای پر کردن جعبه. تا پایین که برسید نوار بالای جعبه کامل میشود و از راست پر شده است.
بند ۴: متن نمونه برای پر کردن جعبه. تا پایین که برسید نوار بالای جعبه کامل میشود و از راست پر شده است.
بند ۵: متن نمونه برای پر کردن جعبه. تا پایین که برسید نوار بالای جعبه کامل میشود و از راست پر شده است.
بند ۶: متن نمونه برای پر کردن جعبه. تا پایین که برسید نوار بالای جعبه کامل میشود و از راست پر شده است.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add scroll-progressنصب دستی
محتوای تب «کد» را در
components/animations/scroll-progress.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
1import { ScrollProgress } from "@/components/animations/scroll-progress"23// app/blog/[slug]/page.tsx4<ScrollProgress />56// or inside a scroll box7<div ref={box} className="overflow-auto"><ScrollProgress targetRef={box} className="sticky" />…</div>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| targetRef | RefObject<HTMLElement> | - | جعبهی اسکرولشونده. بدون آن، خودِ صفحه حساب میشه. |