قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
خانه / مقالات / css/html / طراحی Loading بدون استفاده از تصویر

طراحی Loading بدون استفاده از تصویر

طراحی Loading بدون استفاده از تصویرReviewed by سالار on Aug 9Rating: 5.0

سلام به همه ی همراهان

حتما شما با لودینگ اشنا هستید . لودینگ خوبی ها و بدی هایی دارد که براتون توضیح خواهیم داد 🙂 یکی از بدی های ان پایین اوردن سرعت وب سایت است که این تاثیر مستقیمی بر سئو ی شما دارد . ولی امروز کدی به شما معرفی میکنیم که کم کردن سرعت وب سایت را به حداقال برساند پس با ما همراه باشید .

مقدمه :

همونطور که خودتون میدونید بعضی جاها باید از یک تصویر استفاده کنیم که نشون دهنده حالت انتظار و loading باشه ، که به کاربر بفهمونه درخواستش در حال انجام شدنه و باید مدت کمی منتظر بمونه تا کارش بطور کامل انجام بشه. خب حالا با استفاده از این امکان که در این سایت قرار داده شده دیگه لازم نیس از هیچ تصویری استفاده کنیم و نیازی هم به jQuery  نداریم. تمام کار با کدنویسی انجام شده و با تنظیماتی که وجود داره میتونیم شکلک loading مورد نظر خودمونو بسازیم و در سایت خودمون از اون استفاده کنیم. مرورگرهای زیر از این امکان پشتیبانی می کنند :

  • Chrome
  • +Safari 3.2
  • +Firefox 3.5
  • IE 6,7,8,9
  • +Opera 10.6
  • (+Mobile Safari (iOS 3.1
  • +Android 2.3

آموزش :

 خب دوستانی که انگلیسیشون نسبتا خوب باشه با رفتن به سایت مربوطه Spin.JS به راحتی میتونن همه جزئیاتشو بفهمن.در ابتدای این سایت یک demo وجود داره که میشه نحوه عملکرد هر خاصیت رو عینا دید. با این وجود من بیشتر توضیح میدم.برای شروع ما می آییم و یک DIV با عرض و طول صفر میسازیم و ID آن را برابر foo قرار میدهیم.

حال از سایت معرفی شده فایل مربوطه را دانلود میکنیم و آن را به انتهای کدهایمان و قبل از تگ بسته </body> اضافه میکنیم.

نکته : من خودم همیشه کدهای Javascript رو در انتهای کدهای دیگر قرار میدم.این کار باعث میشه که ابتدا سایر کدها و المنت ها و ساختار DOM لود شوند و بعد از آن کدهای Javascript انجام شوند ، با این کار از بعضی ارورهای احتمالی جلوگیری میکنیم.(البته راههای دیگری هم برای اینکار وجود دارد ولی راحتترین روش همینی هست که گفتم.)

پیشنهاد میکنم فایل spin.min.js رو دانلود کنید چون حجمش کمتره و سایتمون سریعتر لود میشه.حال به شکل زیر عمل میکنیم :

 

بعد از الحاق کردن این فایل به سندمون باید تنظیمات مدنظر خودمونو انجام بدیم که من کمی در مورد اونا براتون توضیح میدهم :

  • Lines : تعداد خطوط مدنظر در شکل
  • Length : کم و زیاد کردن طول خطوط
  • Width : ضخامت هر خط
  • Radius : شعاع دایره درونی
  • Corners : گرد کردن گوشه هر کدام از خطوط که عددی بین ۰ و ۱ میباشد
  • Rotate : چرخاندن شکلکمان
  • Direction : تعیین کردن جهت چرخش شکلک ، که دو عدد ۱ و -۱ را قبول میکند. ۱ به معنای چرخیدن به صورت ساعتگرد و -۱ به معنای پادساعتگرد (خلاف جهت گردش عقربه های ساعت) میباشد.
  • Color : مشخص کردن رنگ برای شکلک
  • Speed : مشخص کننده سرعت چرخش میباشد که بر حسب دور بر ثانیه میباشد. مثلا اگر بنویسیم ۲ ، به معنای آن است که در یک ثانیه دو دور خواهد زد.
  • Shadow : اگر آن را برابر false قرار دهیم ، سایه نخواهد داشت و اگر برابر با true باشد سایه دار خواهد شد.
  • Top و left : این دو خاصیت موقعیت شکلک را نسبت به عنصر پدر مشخص میکنند.

در خط ۳۲ اومدیم و اشاره گری از div خودمون رو در متغیر target ذخیره کردیم.

در خط ۳۳ اومدیم و تنظیمات و خصوصیات رو با استفاده از متد spin() به div خودمون نسبت دادیم.

با این کارها به سادگی و زیبایی شکلک loading خودمونو ساختیم و در هر جا که بخوایم میتونیم از اونا استفاده کنیم.

اهداف و مزایای استفاده از این ابزار :

  • استفاده آسان و راحت
  • عدم استفاده از تصویر و CSS
  • بدون نیاز به jQuery
  • مستقل از Resolution
  • پشتیبانی از طیف وسیعی از مرورگرها

 

دانلود

مطلب پیشنهادی

افزونه دانلود به ازای پرداخت بانک ملت برای وردپرس

افزونه دانلود به ازای پرداخت بانک ملت برای وردپرسReviewed by سالار on Jun 20Rating: 5.0سلام …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

 
در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید تا بهترین پست هفته مارو در ایمیل خودتون دریافت کنید :)

تبریک ! شما عضو خبرنامه ما شدید