Mprogress.js ile Kolayca Materyal Tasarımı İlerleme Çubuğu Oluşturun

Google’ın inkar etmesine gerek yok malzeme tasarımı Web'i kökten değiştirdi. Bir sunar ortak tasarım dili UI tasarımcılarının tüm web sitelerine ve mobil uygulamalara uygulayabilecekleri.

Bu malzeme tasarım trendi, popüler Materialize çerçevesi de dahil olmak üzere birçok kütüphaneye yol açtı. Ve biri havalı yeni malzeme projeleri Buldum Mprogress.js.

Bu JavaScript kütüphanesi bir üretir malzeme tarzı ilerleme çubuğu saf CSS ve JavaScript kullanarak. Bağımlılık yok, saçmalama. Herhangi bir web sitesi veya web uygulamasıyla eşleşecek şekilde malzeme tasarım görünümünde basit yükleme (ve önceden yükleme).

Kurulum oldukça basit ve sadece iki dosya gerektirir: bir CSS ve Mprogress'ten bir JS betiği.

Yapabilirsin ikisini de indir GitHub deposundan veya paket yöneticisi kullan npm veya Bower gibi. Oradan, ihtiyacın var yeni bir Mprogress nesnesi yarat ve yükleyiciyi çalıştırmasını söyle.

Bu kelimenin tam anlamıyla yapılabilir. bir kod satırı:

 var mprogress = yeni Mprogress ('başlangıç'); 

Diğer özellikleri İlerleme çubuğunun animasyon zamanlamasını, hızını veya ekran rengini değiştirmek için uygulanabilir. Bu yapılandırma size bile izin verir özel şablonlar oluştur varsayılan malzeme tasarım stiline göre. müthiş!

Bir göz atın demo sayfası bu yükleyiciyi çalışırken görmek için. Büyüleyici bir yükleme çubuğu değil, ancak sıfırdan bir tane oluşturmanıza gerek kalmadan güzel bir çözüm sunuyor.

Gibi yöntemleri çalıştırabilirsiniz set () için yüzde ayarlamak veya Inc () için yükleme çubuğunu artırmak. Bir HTTP yükleyicisi oluşturmak için programlı olarak kullanılabilir, ancak bu, JavaScript'te ek çalışma gerektiriyor.

Mprogress.js güzelliği sadeliği. Verileri nasıl yapılandıracağınızı veya neleri yüklemeniz gerektiğini söylemez. Sayfayı yüklüyor olabilir ya da bir dosyayı yüklüyor olabilir. Veya kullanıcının sayfanın üst kısmından ne kadar aşağı kaydırdığını takip ediyor olabilir..

Bu kütüphaneyle ve ile yapabileceğin çok şey var. sıfır bağımlılıklar Herhangi bir web projesi için kullanabilirsiniz. Başlamak için, MProgress repo GitHub’ta, aynı zamanda belgeleme.