آشنایی با ۵ ابزار آنلاین Loading سوارد شده یا نوار پیشرفت

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

در این نوشته قصد دارم شما رو با ۵ ابزار آنلاین Loading سوارد شده آشنا کنم که کاربرد فراوانی در صفحات Ajax دارند . برای آشنایی با این ۵ ابزار جالب با من همراه باشید :

درگیرکننده کنندگان وارد شده نرم افزار فتوشاپ مسلما توانایی طراحی و ایجاد تصاویر loading رو دارند و میتونن بترین ها رو برای وب سایت خودشون طراحی و ایجاد کنند اما خب این روند هم زمان بر هست هم نیوارد شدهمند ایده مناسب که شاید همیشه برای هر طراحی فراهم نباشه . ب همین خاطر ما وارد شده ابزارهای آنلاینی مثل این ۵ ابزار بی نظیر که ب شما معرفی میکنم درگیرکننده میکنیم که هم ساده تر ب نتیجه میرسه هم میتونیم وارد شده کیفیت بالاتری برمند بشیم .

چندی پیش در آموزش ” نوار پیشرفت و یا Progress Bar چیست + ۲۵ نمونه خلاقانه ” بسیار کامل در مورد این المنت مهم در وب سایت صحبت کردیم و ۲۵ نمونه مناسب رو ب شما معرفی کردیم که دید بوارد شدهتری در این زمینه داشته باشید و در این نوشته میخوایم ۵ ابزار آنلاین رو ب شما معرفی کنیم که این نوار پیشرفت یا Loading سوارد شده رو با فرمت های مختلف ب شما ارائه میکنن .

لطفا ۱ نکته رو فراموش نکنید !

تصویر Loading شامل ۲ حالت هست :

  • حالت اول : نوار پیشرفت یک تصویر ثابت  هست که صرفا ب شما اطلاع میدهد  اطلاعاتی در حال بارگزاری می باشد.
  • حالت دوم : نوار پیشرفت هوشمند بوده و ب همان میزانی که اطلاعات بارگزاری میشود ب همان میزان پیشرفت را نشان میدهد.

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

cssload

این وب سایت علاوه بر سایر امکاناتی که در اختیار شما قرار میده ، انواع تصاویر Loading رو هم در خودش جای داده تا شما بتونید با انتخاب طرح لودینگ مورد نظرتون ب شخصی سوارد شده اون بپردوارد شدهین . با انتخاب هر طرح میتونید رنگ المنت اصلی ، رنگ پس زمینه ، اندوارد شدهه تصویر خروجی و میزان سرعت انیمیشن رو تعیین کنین . پس وارد شده انجام تنظیمات میتونید خروجی رو دریافت کنین . خروجی ب صورت کد CSS و HTML در اختیار شما قرار میده . همینطور -moz- و -webkit- و -o- و -ms- رو هم پشتیبانی میکنه .

loading-io-1

وب سایتی حرفه ای در ساختن تصاویر لودینگ با امکانات فراوان و بیش وارد شده ۳۵ تصویر متنوع پیش فرض . در این وب سایت شما پارامتر های زیادی رو میتونید تعیین و شخصی سوارد شدهی کنین مانند ، تعیین ابعاد تصویر لودینگ ، رنگ تصویر لودینگ ، سرعت تصویر ، رنگ پس زمینه ، theme رنگی پیشنهادی و مهم تر وارد شده اون امکان خروجی ب صورت GIF و SVG و CSS ب صورت همزمان. همینطور با عضویت و ایجاد حساب کاربری در این سایت میتونید تصاویر ساخته شده خودتون رو همیشه در حساب داشته باشید و تصاویر جدیدی رو هم در اون ذخیره و نگهداری کنین .

logo

این وب سایت که وارد شده وب سایت های بسیار قدیمی در این زمینه هست بر خلاف cssload صرفا ب شما یک تصویر GIF ارائه میکنه . شما در این سایت میتونید وارد شده بیش وارد شده ۳۰ طرح مختلف درگیرکننده کنین و براساس نیوارد شدهتون رنگ تصویر لودینگ و رنگ پس زمینه رو تعیین کنین . همونطور که گفتم متاسفانه این سایت کد CSS در اختیار شما قرار نمیده .

loadinfo

این وب سایت بیش وارد شده ۵۰ تصویر متفاوت لودینگ رو در اختیار شما قرار میده و نیز همانند ajaxload صرفا یک تصویر ب شما ارائه میکنه ولی در شخصی سوارد شدهی اون بیشتر دستتون بوارد شده هست و میتونید پارامتر هایی مثل رنگ اصلی تصویر لودینگ ، رنگ پس زمینه ، تعیین Flip بودن یا نبودن تصویر ، انتخاب ابعاد تصویر وارد شده ۱۶ پیکسل تا ۴۸ پیکسل و همینطور سرعت انیمیشن رو وارد شده ۵ fpss تا ۵۰ fps تعیین کنین .

loadergenerator

این وب سایت نیز همانند دو نمونه قبل و در تعداد تصاویر کمتری ب شما خروجی GIF ارائه میکنه . تنها پارامتری که در این وب سایت اضافه تر وارد شده نمونه هاش گذشته هست امکان rotate یا چرخش تصویر مورد نظر هست .

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


مشاهده مطلب قبلی

مشاهده مطلب بعدی >>


اگر این آموزش برای شما مفید بود با دوستان خود ب اشتراک بگذارید

دیدگاهتان را بنویسید

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