Material-Preloader : پلاگین jQuery برای ساخت لودر زیبا

- visibility ۲ mode_comment

در این مطلب میخوام یک پلاگین jQuery بنام Material-Preloader رو خدمت شما معرفی کنم و اونو آموزش بدم.

preloader

با استفاده از این پلاگین میتونین براحتی هر چه تمامتر لودر زیبایی رو در بالا و یا پایین سایتتون قرار بدین و به ظاهر سایتتون زیبایی بیشتری ببخشید.

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

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به materialPreloader.min.js و jquery.min.js و materialPreloader.min.css نیاز داریم. این فایلهارو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

استفاده از این ابزار خیلی راحته. برای اینکار میتونین یک نمونه از شئ materialPreloader رو بسازید. بصورت زیر :

میبینید که این نمونه رو در یک متغیر بنام preloader قرار دادیم. برای اینکه این لودر رو فعال کنیم باید اون رو on کنیم و برای غیرفعال کردنش باید اونو off کنیم. بصورت زیر :

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

  •  position : با استفاده از این ابزار میتونین مکان قرار گیری نوار رو مشخص کنید که دو مقدار top و bottom رو دریافت میکنه
  • height : ارتفاع نوار رو مشخص میکند
  • col_1 و col_2 و col_3 و col_4 : با استفاده از این ویژگی ها میتونین رنگ نوارها رو مشخص کنید. در این ابزار چهار رنگ رو میشه مشخص کرد.
  • fadeIn : مدت زمان ظاهر شدن بر حسب میلی ثانیه
  • fadeOut : مدت زمان مخفی شدن بر حسب میلی ثانیه

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

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

عالی بود
تشکر

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

خواهش میکنم
موفق باشید

نیاز به لاگین

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