Spinner & Loader Kütüphanesi : CSSPIN
Özel girdi alanlarından açılır kutulara ve hatta vektör grafiklerine kadar CSS3 ile inanılmaz şeyler yapabilirsiniz. Bu teknikler JavaScript’i hızla geçmekte ve geliştiricilerin daha iyi kullanıcı deneyimi elde etmesini kolaylaştırmaktadır.
Yapılması gereken en zor şeylerden biri de bir yükleme animasyonudur ancak modern CSS animasyonu bile oldukça basitleştirir.
Sıfırdan zamandan kazanmak için, tonlarca önceden tanımlanmış özel spinnerlere CSSPIN gibi bir kitaplık kullanabilirsiniz. Bu animasyonların tamamı klonlamakta özgürdür ve tamamen açık kaynaklara sahiptir, bu nedenle kodu istediğiniz gibi düzenleyebilmeniz için tam erişim hakkına sahipsiniz.
Bu kütüphaneyle bir spinner kurmak oldukça basittir. CSS kitaplığını sayfanıza kopyalayıp özel HTML öğelerini görünmesini istediğiniz yerde ekleyin.
Bu özel spinnerler, animasyon efekti oluşturmak için yalnızca bir HTML öğesi kullanır. Bu çok büyük çünkü grafik ve animasyon efekti tamamen CSS sınıflarıyla işleniyor.
Ve kaynak koda erişiminiz olduğundan, projelerinize daha iyi uyacak şekilde şekilleri, renkleri, boyutları ve animasyon hızlarını değiştirebilirsiniz.
Kodun LESS sözdizimini kullandığına dikkat edin, bu nedenle önemli düzenlemeleri yapmak için bu önişleme dili hakkında bilgi sahibi olmanız gerekir.
Ancak, ana demo sayfasında, GitHub sayfasındaki basit talimatların yanı sıra düz CSS örnekleri bulabilirsiniz.
Npm veya Bower’ı biliyorsanız, bunlar kütüphaneyi kurmak için alternatif yöntemlerdir.
Ne kadar yüklü olursanız olun, çalışmak için harika bir CSS animasyon kütüphanesi. Yeni eğiticiler, yeni animasyonlar ve diğer geliştiricilerin özelleştirmeleri için tamamen modüler olması gerekiyor.
Daha fazla bilgi edinmek ve tüm dokümantasyonlara göz atmak için GitHub’daki CSSPIN repo’yu kontrol edin. Yaratıcı, aşağıda izleyebileceğiniz küçük bir kurulum videosu da hazırladı.
Bu makalede web projelerinizde yükleme sırasında kullanabileceğiniz açık kaynak spinner ve loaderler içeren CSSPIN kütüphanesinden bahsettik. Siz de düşüncelerinizi yorum yaparak bizlerle paylaşabilir, Mutfağa katkıda bulunabilirsiniz.
