Buat Bar Kemajuan Reka Bentuk Bahan Mudah dengan Mprogress.js
Tidak dinafikan bahawa Google reka bentuk bahan telah secara radikal mengubah web. Ia menawarkan a bahasa reka bentuk biasa pereka UI boleh memohon kepada semua laman web & aplikasi mudah alih.
Trend reka bentuk bahan ini telah membawa kepada banyak perpustakaan, termasuk kerangka Materialize popular. Dan salah satu projek bahan baru yang paling hebat Saya telah jumpa Mprogress.js.
Pustaka JavaScript ini menghasilkan a bar kemajuan gaya bahan menggunakan CSS dan JavaScript tulen. Tiada kebergantungan, tiada karut. Pemuatan ringkas (dan preloading) hanya dengan rupa reka bentuk material yang akan sepadan dengan mana-mana laman web atau aplikasi web.
Persediaan cukup mudah dan hanya memerlukan dua fail: CSS dan skrip JS dari Mprogress.
Awak boleh muat turun kedua-duanya dari repo GitHub atau gunakan pengurus bungkusan seperti npm atau Bower. Dari sana, anda perlu buat objek Mprogress baharu dan beritahu ia untuk memulakan loader.
Ini boleh dilakukan secara literal satu baris kod:
var mprogress = new Mprogress ('start'); Hartanah lain boleh digunakan untuk mengubah masa animasi, kelajuan, atau paparan bar kemajuan. Konfigurasi ini juga membolehkan anda buat templat tersuai berdasarkan gaya reka bentuk bahan lalai. Awesome!
Ambil mengintip di halaman demo untuk melihat pemuat tindakan ini dalam tindakan. Ia bukan bar pemuatan yang memukau, namun ia menawarkan penyelesaian yang bagus tanpa anda perlu membina satu dari awal.
Anda boleh menjalankan kaedah seperti itu tetapkan () kepada tetapkan peratusan atau inc () kepada kenaikan bar pemuatan. Ia boleh dikendalikan secara pemrograman untuk membuat pemuat HTTP tetapi itu memerlukan kerja tambahan dalam JavaScript.
Keindahan Mprogress.js adalah kesederhanaannya. Ia tidak memberitahu anda bagaimana untuk menyusun data atau apa yang anda perlu memuatkan. Ia boleh memuatkan halaman, atau ia boleh mengendalikan muat naik fail. Atau ia boleh menjejaki sejauh mana pengguna telah menatal dari bahagian atas halaman.
Terdapat begitu banyak yang boleh anda lakukan dengan perpustakaan ini dan dengan sifar kebergantungan anda boleh menggunakannya untuk sebarang projek web. Untuk memulakan, lihat Repo MProgress di GitHub di mana anda juga boleh menyemak imbas melalui dokumentasi.
