آشنایی با 5 ابزار آنلاین Loading ساز یا نوار پیشرفت

سامان

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

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

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

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

1- ابزار cssload.net

cssload

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

2- ابزار loading.io

loading-io-1

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

3- ابزار ajaxload.info

logo

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

4- ابزار loadinfo.net

loadinfo

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

5- ابزار loadergenerator.com

loadergenerator

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

منبع : مدرسه مجازی ایرانیان

11
اشتراک گذاری
سامان
سامان

فارغ التحصیل کارشناسی نرم افزار، علاقه مند به برنامه نویسی، طراحی وب، تکنولوژی های نوین، یادگیری و فیلم

پاسخ دهید