• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

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

در این مطلب میخوام یک ابزار زیبا بنام 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 شروع و تا اون عدد با سرعت میشماره و اون هم وقتی که صفحه اسکرول میشه و به اون ناحیه میرسه شروع به شمردن میکنه.
    یه همچین پلاگینایی رو میشناسین؟اگه لطف کنید لینک بدید یا اسمشون رو بگید واقعا ممنون میشم ❓ ❓

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

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

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram