Buat Material Progress Bar Desain Mudah dengan Mprogress.js

Tidak dapat disangkal bahwa Google desain material telah mengubah web secara radikal. Ini menawarkan bahasa desain umum yang dapat diterapkan oleh perancang UI ke semua situs web & aplikasi seluler.

Tren desain bahan ini telah menyebabkan banyak perpustakaan, termasuk kerangka kerja Materialize yang populer. Dan salah satunya proyek material baru yang paling keren Saya temukan adalah Mprogress.js.

Pustaka JavaScript ini menghasilkan a progress bar gaya material menggunakan CSS murni dan JavaScript. Tidak ada ketergantungan, bukan omong kosong Hanya memuat sederhana (dan preloading) dengan tampilan desain bahan yang akan cocok dengan situs web atau aplikasi web apa pun.

Pengaturannya cukup sederhana dan hanya membutuhkan dua file: CSS dan skrip JS dari Mprogress.

Kamu bisa unduh keduanya dari repo GitHub atau gunakan manajer paket seperti npm atau Bower. Dari sana, Anda perlu buat objek Mprogress baru dan katakan untuk memulai loader.

Ini dapat dilakukan dengan harfiah satu baris kode:

 var mprogress = kemajuan baru ('mulai'); 

Properti lainnya dapat diterapkan untuk mengubah waktu animasi, kecepatan, atau warna tampilan bilah kemajuan. Konfigurasi ini bahkan memungkinkan Anda buat templat khusus berdasarkan gaya desain material standar. Luar biasa!

Mengintip halaman demo untuk melihat loader ini beraksi. Ini bukan bilah pemuatan yang memikat, namun ia menawarkan solusi yang bagus tanpa Anda perlu membuatnya dari awal.

Anda dapat menjalankan metode seperti set() untuk tentukan persentase atau inc () untuk menambah bilah pemuatan. Ini dapat ditangani secara pemrograman untuk membuat pemuat HTTP tetapi itu memang membutuhkan kerja ekstra dalam JavaScript.

Keindahan Mprogress.js adalah kesederhanaannya. Itu tidak memberi tahu Anda bagaimana menyusun data atau apa yang Anda perlu memuat. Bisa memuat halaman, atau bisa menangani unggahan file. Atau bisa juga melacak seberapa jauh pengguna telah menggulir dari bagian atas halaman.

Ada begitu banyak yang dapat Anda lakukan dengan perpustakaan ini dan dengan nol ketergantungan Anda dapat menggunakannya untuk proyek web apa pun. Untuk memulai, lihat Repo MProgress di GitHub di mana Anda juga dapat menelusuri dokumentasi.