آموزش رایگان ساخت لودینگ loading سایت دیجی کالا با Html | Css

آموزش رایگان و پروژه محور ساخت لودینگ

لودینگ صفحه یکی از جزئیاتیه که تجربه کاربری رو توی لحظات اولیه بازدید از سایت شکل می‌ده. در این مینی پروژه قراره با HTML و CSS یه لودینگ مشابه دیجی کالا بسازیم که تا بارگذاری کامل صفحه نمایش داده می‌شه.

در این مینی پروژه لودینگ از دو بخش تشکیل شده. بخش اول لوگوی سایت که بالای صفحه قرار گرفته و بخش دوم یه ردیف نقطه که زیر لوگو انیمیشن می‌شه. این ترکیب ساده، توجه کاربر رو تا آماده شدن صفحه حفظ می‌کنه.

انیمیشن نقطه‌ها با CSS خالص پیاده‌سازی شده. چهار نقطه به صورت افقی کنار هم قرار گرفتن و با استفاده از box-shadow، موقعیتشون توی حالت‌های مختلف تغییر می‌کنه. این تکنیک باعث می‌شه نقطه‌ها به صورت موجی حرکت کنن و حس پویایی به لودینگ بدن.

کل لودینگ یه لایه تمام‌صفحه‌ست که کل پنجره مرورگر رو می‌پوشونه. این لایه با position fixed در مرکز صفحه قرار گرفته و z-index بالایی داره تا روی همه محتوا دیده بشه. محتوای داخلش هم با flexbox در وسط چیده شده.

انیمیشن لودینگ به صورت حلقه‌ای اجرا می‌شه و چهار مرحله داره. در هر مرحله، یکی از نقطه‌ها به سمت بالا جابه‌جا می‌شه و بقیه در جای خودشون می‌مونن. این چرخه مدام تکرار می‌شه تا لودینگ حذف بشه.

استایل‌دهی پروژه کاملاً با CSS انجام شده و هیچ اسکریپتی برای انیمیشن استفاده نشده. لوگو ابعاد مشخصی داره و نقطه‌ها کوچیک و گرد هستن. سرعت انیمیشن هم طوری تنظیم شده که نه کند باشه نه تند.

نکته کاربردی این پروژه، یادگیری ساخت انیمیشن با CSS خالص و استفاده از box-shadow برای جابه‌جایی عناصره. این روش بدون نیاز به کتابخونه خارجی، انیمیشن روانی می‌سازه.

در نهایت یه لودینگ کامل داری که می‌تونی ازش در پروژه‌های شخصی خودت استفاده کنی. سورس کامل پروژه به صورت رایگان در دسترسه تا کدها رو بررسی کنی.

اگه می‌خوای این جور جزئیات رو در قالب یه پروژه فروشگاهی کامل پیاده کنی، آموزش پروژه‌محور ساخت قالب دیجی کالا می‌تونه انتخاب مناسبی باشه.