Progressbar.js ile İlerleme Çubuğu Nasıl Yapılır ?

İlerleme çubuklar neredeyse bütün Webmasterlar tarafından bilinir. Ancak sıfırdan bir ilerleme çubuğu üretmek deyince gözünüz biraz korkuyor olabilir. Progressbar.js adlı modül bize bu olayı kolayca ve sıfırdan yapmamıza gerek kalmadan gerçekleştiriyor.

Şöyle bir güzelliği de gözümüze çarpıyor ki , diğer barlar bazı tarayıcılarda çalışmıyor. Progressbar.js ile bu olay tarihe karışmış durumda çünkü IE9+ dahil bütün tarayıcılara desteği var. Sadece düz çizgi şeklinde seçim yapmanıza da gerek kalmıyor. Düz çizgi, yarım daire, tam daire, kare ve üçgen olmak üzere 5 temel şeklimiz mevcut. İçinde tanımlanmış olan 5 temel şekli de seçebiliyoruz. 5 şekil seçebiliyoruz ama kendi şeklimizi de oluşturabiliyoruz. Bu işlem biraz zorlayacaktır ama sonuçlar muazzam çıkıyor deneyebilirsiniz 🙂

Kütüphanemiz SVG yoluyla çalışıyor. Dolayısıyla SVG biçimlendirmesiyle oluşturduğunuz şekillerinizi, kütüphaneye taşıyabilirsiniz. Bu taşıdığınız animasyonların içine yazı yazabilir veya gerekli yerlerde durdurma kesme işlemleri uygulayabilirsiniz. ProgressBar.js Bower, npm veya daha basitleştirilmiş GitHub sayfasını kullanarak komut dosyasını indirebileceğiniz veya kurabileceğiniz küçük bir kurulum kılavuzu da vardır. Npm kurulumunu daha önceki MEAN yapısı nedir ? yazımızda anlatmıştık. O yazımıza aşağıda yorum kısmındaki linkten ulaşabilirsiniz.

Progressbar kullanımının yaygın olduğundan bahsetmiştik. Eğer ki havalı bir stil yakalarsanız bunu Github Repo’suna yükleyebilirsiniz. Projenin yaratıcısı Kimmo Brunfeldt bu anlamda herkese açık ve başka tasarımları elde edebileceğiniz bir Github Reposu oluşturmuş. Bu konuda Bay Brunfeldt’e teşekkür ediyoruz 🙂

Yapacağınız tasarımlar tamamen sizin hayalgücü ve zevkinize kalmış. Ne kadar istekli olursanız o kadar güzel sonuçlara imza atabilirsiniz.

Sizin için bir örnek yüklemek istiyorum. Bu örneğimiz bir kalp ve bu tasarımı kopyalayıp dilediğiniz gibi değiştirebilirsiniz. Daha fazla örneklere ulaşmak istiyorsanız Progressbar.js in kendi yaptığı sayfasına buradan ulaşabilirsiniz. Şimdi sizi örneğimizle baş başa bırakıyorum iyi günler 🙂

Sorunuz olursa bize yorum yoluyla bildirmeyi unutmayın. En son çıkan yayınlarımızdan ilk siz haberdar olmak isterseniz sağ tarafta yer alan mail aboneliği kısmından bize abone olabilirsiniz.