آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

pace : اضافه شدن اتوماتیک نوار پیشرفت ( Progress Bar ) زیبا به سایت شما

7 2182 ۱۶ اردیبهشت ۹۴

در این مطلب میخوام یک ابزار زیبا بنام pace رو خدمت شما معرفی کنم و اونو آموزش بدم.

pace

با استفاده از این ابزار میتونین کاری کنید در ابتدا که وارد سایتتون میشید ، یک لودر زیبا بصورت اتوماتیک قرار بگیره و تا زمانی که سایتتون کامل بالا بیاد ادامه داشته باشه. همچنین این ابزار زمانی که درخواست بصورت Ajax هم میفرستید فعال میشه و تا اتمام اون نمایش داده میشه.

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

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

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

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

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

Pace تعداد زیادی لودر مختلف داره که میتونین از هر کدوم که دلتون خواست استفاده کنید. انواع مختلف لودر ها در اینجا قرار گرفته. به پایین صفحه که اسکرول کنید ، انواع مختلف رو خواهید دید ، فرض کنید من میخوام از نوع Corner Indicator استفاده کنم :

pace1

روی لینک دانلود مربوط به اون کلیک میکنم ، به صفحه ی جدیدی منتقل میشید و کدهای CSS در اختیار شما قرار میگیره. حالا یک فایل بنام pace-theme-corner-indicator.css بسازید و این کدها رو درونش قرار بدین :

سپس این فایل رو درون قسمت head صفحه قرار بدین :

حالا محتویات سایتتون رو قرار بدین. سعی کنید تا جایی که میشه سنگین باشه که لودر نمایش داده باشه و بتونین اون رو ببینید :

برای اونا کد CSS ساده ای هم مینویسم :

اگه از درخواست Ajax هم استفاده بشه ، این لودر نمایش داده میشه.

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 7 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    افشین زندی(۱۷ اردیبهشت ۱۳۹۴)

    سلام آقای اسفندیاری.تشکر بابت این پلاگین کاربردی و زیبا.
    ببخشید من دارم رو یه قالبی کار میکنم نیاز به 2 تا پلاگین دارم که متاسفانه اسم کلیشون رو نمیدونم که سرچ مناسبی داشته باشم.
    اولیش اینه که یه پروسس بار هستش که توانایی ها رو نشون میده که میخوام وقتی اسکرول میشه و به اون ناحیه میرسه پر بشه و کاربر افکت رو ببینه.
    دوم اینه که مثلا نشون میده که چند نفر تو فیسبوک دنبال میکنن و از 0 شروع و تا اون عدد با سرعت میشماره و اون هم وقتی که صفحه اسکرول میشه و به اون ناحیه میرسه شروع به شمردن میکنه.
    یه همچین پلاگینایی رو میشناسین؟اگه لطف کنید لینک بدید یا اسمشون رو بگید واقعا ممنون میشم ❓ ❓

    • ‏‏
      محمد اسفندیاری(۱۹ اردیبهشت ۱۳۹۴)

      خواهش میکنم
      ببینید این کارتون رو راه نمیندازه
      http://www.7learn.com/tutorials/create-circular-svg-charts-with-circles

      • ‏‏
        افشین زندی(۱۹ اردیبهشت ۱۳۹۴)

        سلام.نه آقای اسفندیاری طرحی که من دارم روش کار میکنم پروسس بارش مستطیل شکله.از همونا که تو اکثر قالبای مدرن استفاده میکنن مثلا میگن css 90% .خیلی گشتم اما چیز مناسبی پیدا نکردم.در هر صورت ممنون از پاسختون

  • ‏‏
    افشین زندی(۱۹ اردیبهشت ۱۳۹۴)

    بالاخره این پلاگینو پیدا کردم.گفتم شاید بخواید معرفی کنید
    https://github.com/joemottershaw/pro-bars

    • ‏‏
      محمد اسفندیاری(۱۹ اردیبهشت ۱۳۹۴)

      اگه از چیزی که پیدا کردید راضی نیستید ، میتونید آدرس سایت مورد نظر که چیزی که شما میخواید درش قرار داره رو بگید تا براتون پیداش کنم

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :