Perşembe 30 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. CSS
  3. Progressbar.js ile İlerleme Çubuğu Nasıl Yapılır ?
 Progressbar.js ile İlerleme Çubuğu Nasıl Yapılır ?
CSS HTML5 JavaScript Nasıl Oluşturulur?

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

Yazar : Furkan Baycan 3 Mart 2017 0 Comment

İ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.

 

Etiketler: ilerleme çubuğu javascript ilerleme çubuğu js ilerleme çubuğu yapımı javascript progress bar javascript progress bar nasıl yapılır progressbar progressbar.js
Önceki Yazı
Sonraki Yazı

Furkan Baycan (Website)

administrator

Güvenlik ve Web Programcılığı alanında çalışıyorum. Bu alanlarda da sizler için mutfakta yazılar yazıyorum. Siz de çok değerli projeleriniz ve yorumlarınızla mutfağa katkıda bulunabilirsiniz.

Yorum Yap Yorumu İptal Et.

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

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.