توسط افزونه های جی کوئری میتوان امکانات زیادی را در صفحات وب ایجاد کرد. در این مطلب از ایران تمز قصد معرفی و آموزش استفاده از افزونه جی کوئری پروگرس بار nprogress Bar را داریم تا بتوانید از آن در طراحی قالب وردپرس مورد نظرتان برای نمایش میزان پیشرفت بارگذاری صفحات سایت و وردپرس استفاده کنید. از این افزونه جی کوئری در سایتهایی مانند یوتیوب و همیار وردپرس استفاده شده است. تا انتهای آموزش همراه ما باشید.
ویژگی های افزونه جی کوئری پروگرس بار nprogress
برخی از امکانات و قابلیتهای پلاگین ان پروگرس عبارتند از:
- نمایش ایجکسی میزان لودینگ صفحه وب
- سازگار با انواع سیستم های مدیریت محتوا ازجمله وردپرس
- حجم کم و سرعت بارگذاری بالای انیمیشن ها
- امکان تنظیم سرعت حرکت خط و دایره انیمیشن
- قابلیت تغییر رنگ و اندازه خط و دایره
- نمایش تدریجی محتوای برگه در زمان بارگذاری سایت
- امکان جابه جایی نوار پروگرس بار از بالای صفحه به پایین برگه
- نصب و راه اندازی ساده و سریع
- و …
آموزش افزونه جی کوئری پروگرس بار nprogress Bar
همینطور که از نام پلاگین پیداست این افزونه میزان پیشرفت لود شدن صفحه را مشخص میکند.
تا زمان لود کامل صفحه وب با نمایش خطی که کم کم تکمیل میشود به همراه دایره ای در سمت راست صفحه که تا بارگذاری کامل محتوای برگه حال چرخیدن است، لود شدن سایت را نمایش میدهد. برای درک بهتر موضوع به تصویر پیش نمایش زیر دقت کنید.
افزونه جی کوئری پروگرس بار را با مراجعه به صفحه NProgress در گیت هاب و یا از این لینک میتوانید دانلود کنید. پیشنهاد میکنیم فایل اصلی را از گیت هاب دریافت کنید تا در صورت بروز شدن افزونه بتوانید از امکانات نسخه جدید استفاده کنید. پس از دانلود افزونه فایل فشرده را از حالت فشرده خارج و دو فایل اصلی پلاگین با نام های nprogress.js و nprogress.css را مطابق دستورات زیر در برگه بارگذاری کنید، دقت کنید که باید کتابخانه جی کوئری را در برگه فراخوانی کرده باشید. در نهایت برای فراخوانی افزونه قطعه کد مربوطه را در پاورقی footer صفحه وب قرار میدهیم. اکنون با بارگذاری مجدد صفحه سایت انیمیشن های پروگرس بار را مشاهده خواهید کرد.
// کدهای فراخوانی استایل و فایل جاوا افزونه <script src='nprogress.js'></script> <link rel='stylesheet' href='nprogress.css'/> // کد فراخوانی افزونه پروگرس بار توسط کد زیر <script> NProgress.start(); NProgress.done(); </script>