آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

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

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

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

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

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

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

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

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

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

۱: ابزار cssload.net

cssload

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

۲ : ابزار loading.io

loading-io-1

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

۳ : ابزار ajaxload.info

logo

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

۴ : ابزار loadinfo.net

loadinfo

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

۵ : ابزار loadergenerator.com

loadergenerator

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

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

<<

>>

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



سفارش تبلیغات

گردآوری و تالیف : حسین همت یار

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مشاور گرافیک وب ، طراح UI و تحلیلگر UX، مسلط به نرم افزارهای گرافیکی پیکسلی و برداری و کدنویس HTML , CSS

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • عرفان ولی زاده

    سلام خوبید؟
    خسته نباشید شما سایت داشتید ولی توی این چند ماه اخیر واقعا فعالیتتون اومده پایین و این واقعا حیف هست لطفا بازم مثل قبل شروع به کار کنید

  • hossein

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

  • چه ابزارهای خوب و ساده ای . عالی بود

  • طراحی سایت

    عالی بود ممنون

  • سامان

    خوب بود … مرسی …

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟