Jquery ile içeriğimizi takip eden progress bar yapımı

Progress barlar artık hayatımızın bir parçası olmuş durumda. Örneğin resim yüklerken yada başka bir işlem yaparken resimin yüzde kaçı yüklenmiş veya formun kaçıncı adımındayız tarzında ki bilgileri göstermek kullanıcının site daha fazla kalmasını sağlamaktadır. Eğer bu bilgileri göstermezsek arkaplanda bu işlemler ilerlese bile kullanıcı resim yüklenmiş veya daha çok işlem var diye bıkıp sitenizden çıkabilir.

Bu dersimde size değişik ama bir o kadar da faydalı progress bar örneği göstereceğim. Diyelim ki sayfamızda çok uzun bir içerik var, kullanıcı sayfa da scroll işlemini yaparken içeriğin ne kadarı okumuş/ne kadarı kalmış bilgisini gösterirsek güzel bir bilgi olur diye düşünüyorum. Bunun için bir örnek hazırladım.

progressbar

See the Pen mjVJKW by Uğur (@ugurturkmen) on CodePen.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir