Mprogress.js - Kolayca Progress Bar Oluşturun | Webmaster.Kitchen
Web siteniz veya web projelerinizde progress bar’a ihtiyaç duyuyorsanız, Mprogress.js kullanabilirsiniz. Mprogress kütüphanesi hem basit hem de kullanışlıdır.
Google’ın materyal tasarımının web’i kökten değiştirdiğini inkar edemeyiz. Kullanıcı arayüzü tasarımcılarının tüm web sitelerine ve mobil uygulamalara uygulayabilecekleri ortak bir tasarım dili sunar.
Bu Material tasarım trendi, popüler Materialize frameworkü de dahil olmak üzere birçok kütüphanenin çıkmasına sebep oldu. Bulduğum en havalı yeni Material projelerinden biri de Mprogress.js.
Kurulum oldukça basit ve yalnızca iki dosya gerektiriyor: bir CSS ve Mprogress’ten bir JS komut dosyası.
Kaynak kodları isterseniz GitHub reposundan, isterseniz de npm veya bower gibi paket yöneticisiyle indirip kullanmaya başlayabilirsiniz. Daha sonra yeni bir Mprogress nesnesi oluşturup loader’i çalıştırabilirsiniz.
Bir kod satırıyla bu işi çözebiliriz:
İlerleme çubuğunun animasyon zamanlamasını, hızını veya ekran rengini değiştirmek için diğer özellikler uygulanabilir. Bu yapılandırma, varsayılan material tasarım stili temel alınarak özel şablonlar oluşturmanıza da olanak tanır. Müthiş!
Bu yükleyicinin hareket halinde olduğunu görmek için demo sayfasını bir göz atın. Büyüleyici bir yükleme çubuğu değil, ancak sıfırdan inşa etmenize gerek kalmadan güzel bir çözüm sunuyor.
Mprogress.js’nin güzelliği basitliktir. Verileri nasıl yapılandıracağınızı veya ne yüklenmesi gerektiğini size söylemez. Sayfa yükleniyor olabilir, bir dosya yüklemesi ilerliyor olabilir veya kullanıcının sayfanın üstünden ne kadar ilerlediğini izleyebilir. Dilediğiniz şekilde kullanabilirsiniz.
Bu kütüphaneyle istediklerinizi yapabilirsiniz. Sıfır bağımlılığı ile herhangi web projenize dahil edebilirsiniz. Başlamak için GitHub reposundaki dokümantasyona göz atabilirsiniz.
Bu makalede progress bar için kullanabileceğeniz Mprogress.js kütüphanesinden bahsettik. Bu konu hakkındaki düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.