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

- visibility ۴ mode_comment

با سلام خدمت همه دوستان سون لرنی عزیز

امروز میخوام شما رو با یه سایت آشنا کنم که یه امکان جالب رو در اختیار ما قرار میده.

همونطور که خودتون میدونید بعضی جاها باید از یک تصویر استفاده کنیم که نشون دهنده حالت انتظار و 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>  اضافه میکنیم.

info نکته :

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

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

 

 

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

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

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

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

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

امیدوارم خوشتون اومده باشه ، اگه کمی و کاستی بود ببخشید و اگر سوالی یا انتقادی بود در قسمت نظرات مطرح کنید.

موفق باشید.

یا علی

 

comment دیدگاه کاربران
digitalarena

از مطالب بسیار خوبتون ممنون امیدوارم موفق باشید. بنده برای راه اندازی سایتم از سون لرن و مطالب آموزنده این سایت استفاده کردم.
Http://digitalarena.ir

لقمان آوند

براتون آرزوی موفقیت می کنیم

صادق قنبری

سلام خسته نباشید
حالا اگر بخواهیم روی یک دکمه از این استفاده کنیم و بد از لود خودش مخفی بشه چیکار کنیم

محمد اسفندیاری

اگر فقط برای دکمه میخواید میتونین از ابزارهای دیگه ای که در نت وجود داره استفاده کنید
فک کنم این http://h5bp.github.io/Effeckt.css/ بدردتون بخوره
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.