تم تاریک
بارگذاری Loading
الگوهای بارگذاری برای مدیریت انتظار کاربر و کاهش اضطراب ناشی از تاخیر در دریافت دادهها طراحی شدهاند. هدف اصلی، اطلاعرسانی به کاربر است که سیستم در حال پردازش درخواست اوست.
انتخاب الگوی مناسب
بسته به نوع محتوا و زمان تخمینی بارگذاری، باید یکی از دو کامپوننت زیر را انتخاب کنید
| اگر شرایط اینگونه است... | از این کامپوننت استفاده کنید |
|---|---|
| بارگذاری کل صفحه یا بخشهای بزرگ محتوایی (مثل جدول یا کارت). | اسکلتون (Skeleton) |
| عملیات کوتاه (مثل کلیک روی دکمه) یا فرآیندهای پسزمینه. | اسپینر (Spinner) |
| زمان انتظار نامشخص و ساختار محتوا نامعلوم است. | اسپینر (Spinner) |
| زمان انتظار مشخص است یا فرآیندی چند مرحلهای/حجیم در جریان است. | نوار پیشرفت (Progress Bar) |
اسکلتون
اسکلتون نسخهای ساده و انتزاعی از رابط کاربری است که پیش از لود شدن دیتای واقعی نمایش داده میشود تا ساختار صفحه حفظ شود.
نمونه زنده
موارد کاربرد
- بارگذاری جداول: نمایش ردیفهای خاکستری به جای دیتای واقعی.
- کارتهای لیست ریسورس: نمایش جایگاه تصویر و متن پیش از لود شدن.
آناتومی اسکلتون
- اشکال پایه: شامل دایره (برای آواتار/آیکون) و مستطیل با لبههای گرد (برای متن و دکمه).
- انیمیشن (Shimmer): یک حرکت نوری ملایم از چپ به راست که نشاندهنده زنده بودن فرآیند است.
اسپینر
اسپینر یک نشانگر دایرهای در حال چرخش است که برای عملیاتهای سریع یا بخشهای بسیار کوچک استفاده میشود.
نمونه زنده
نمونه زیر مستقیم با @panel/uikit رندر میشود و امکان بررسی سایزها و چیدمانهای مختلف اسپینر را فراهم میکند:
در حال بارگذاری...
موارد کاربرد
- داخل دکمه (Button Loading): وقتی کاربر روی "ذخیره" یا "ساخت" کلیک میکند.
- بارگذاریهای میانی: در قطعات کوچک محتوا که ساختار مشخصی ندارند.
در حال بارگذاری...
پراگرس بار
نوار پیشرفت برای نمایش بصری میزان پیشرفت یک فرآیند یا زمان باقیمانده استفاده میشود. این کامپوننت به کاربر حس کنترل داده و انتظار برای فرآیندهای طولانی را ملموستر میکند.
نمونه زنده
50%
آناتومی
با هاور روی شمارههای روی نوار پیشرفت (یا آیتمهای لیست کنار آن)، هر بخش برجسته میشود.
- لیبل (Label): درصد پیشرفت یا متن سفارشی کنار نوار.
- مسیر (Track): ظرف نوار با ارتفاع
8pxو انحنای کاملا گرد. - نشانگر (Indicator): بخش پرشده نوار با رنگ تیره برند (
neutral/t3/bg1/default).
ساختار
با هاور روی بخشهای نوار (یا روی آیتمهای لیست زیر آن)، اندازهی مرتبط با هر بخش نمایش داده میشود.
- ارتفاع نوار (Track Height): مقدار استاندارد
8px(با انحنای لبهRadius-Circular). - رنگ نوار پرکننده (Indicator): رنگ تیره برند (
neutral/t3/bg1/default). - پدینگ و گپ: فاصله بین لیبل و نوار، و پدینگ کانتینر، برابر با
8pxاست.
موارد کاربرد
- آپلود یا دانلود فایلهای حجیم (مانند آپلود امیج در ابر).
- فرآیندهای چند مرحلهای پیشپیکربندی (مثل ساخت دیتاسنتر یا Instance).
- بنرهای بالای صفحه جهت نمایش پیشرفت خروجی گر
بهترین روش
بایدها
- حفظ ابعاد: اسکلتون باید دقیقا هماندازه محتوای نهایی باشد تا پس از لود شدن، صفحه جابجا نشود (Jumping Effect).
- ترازبندی: اسپینر باید همیشه در مرکز بصری (Optical Center) المان یا کانتینر خود قرار گیرد.
- کاهش اضطراب: برای بارگذاریهای طولانی (بیش از ۵ ثانیه)، بهتر است در کنار اسپینر از یک پیام متنی راهنما استفاده کنید.
نبایدها
- از اسکلتون برای عملیاتهای سریع (زیر ۵۰۰ میلیثانیه) استفاده نکنید؛ پرش ناگهانی اسکلتون باعث آزار چشم میشود.
- چندین اسپینر را همزمان در یک صفحه نمایش ندهید؛ این کار باعث سردرگمی کاربر میشود.
- در اسکلتون از رنگهای تند یا انیمیشنهای سریع استفاده نکنید.
رفتار و تعامل
- خروج (Transition): به محض دریافت اولین بایت از دادهها، باید اسکلتون با یک Fade-in ملایم جای خود را به محتوای اصلی بدهد.
- تداخل: در حالی که یک بخش در حالت Loading است، اکشنهای مرتبط با آن (مثل دکمه ارسال) باید در حالت
Disabledقرار بگیرند تا از ارسال چندباره درخواست جلوگیری شود.
دسترسیپذیری
- ARIA: برای اسپینرها حتما بای از ویژگی
role="status"وaria-live="polite"استفاده شود تا ابزارهای خوانش صفحه متوجه فرآیند بارگذاری شوند. - Alt Text: برای کاربران نابینا، یک متن جایگزین مانند "در حال بارگذاری..." در نظر بگیرید.