pemalam jquery NProgress.js mencipta bar_jquery kemajuan memuatkan halaman web

NProgress.js ialah bar kemajuan skala nano yang sangat nipis yang menggunakan animasi garis nipis yang realistik untuk membolehkan pengguna melihat perkara yang berlaku pada halaman web!

Anda mungkin pernah melihat nadi laser merah itu di Youtube yang muncul apabila anda menukar halaman. Sebenarnya, bar kemajuan banyak penyemak imbas mudah alih mempunyai gaya ini, tetapi jarang sekali untuk melaksanakannya pada halaman web. Walau bagaimanapun, dengan pemalam NProgress jQuery, anda boleh mencapainya dengan mudah!

NProgress.js digunakan pada bar kemajuan tipis halaman web yang kompleks. Diinspirasikan oleh Google, YouTube dan Medium.

Pasang

Bergantung pada jQuery (versi 1.8 dan ke atas), tambahkan nprogress.js dan nprogress.css pada projek anda.

Cara menggunakan

NProgress.start() — Paparkan bar kemajuan

NProgress.set(0.4) —Tetapkan peratusan

NProgress.inc() — tambah sedikit

NProgress.done() — bar kemajuan penyelesaian

Anda juga boleh...
Tambahkannya ke tempat anda memanggil Ajax! Ikatkannya pada acara jQuery ajaxStart dan ajaxStop
Buat bar kemajuan yang menarik tanpa Pautan Turbo/Pjax! Ikat pada $(document).ready dan $(window).load

Pemalam konfigurasi

Ubah suai peratusan minimum hingga minimum.

NProgress.configure({ minimum: 0.1 });

Anda boleh mengubah suai struktur penanda melalui templat. Agar bar kemajuan berfungsi dengan betul, elemen yang mengandungi atribut role='bar' diperlukan.

NProgress.configure({ template: "..." });

Laraskan tetapan dan kelajuan animasi (milisaat) melalui kemudahan (nilai pelonggaran dalam CSS).

NProgress.configure({ kemudahan: 'mudah', kelajuan: 500 });

Ingin mematikan langkah bar kemajuan? Tetapkan titisan kepada palsu.

NProgress.configure({ trickle: false });

Anda boleh melaraskan trickleRate (berapa banyak setiap langkah meningkat) dan trickleSpeed ​​​​(selang langkah, dalam milisaat ms).

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

Mahu melumpuhkan gelang kemajuan? Tetapkan showSpinner kepada palsu.

NProgress.configure({ showSpinner: false });

Demo dalam talian http://ricostacruz.com/nprogress/

Muat turun kod sumber https://github.com/rstacruz/nprogress