ProgressBar.js Nedir?

Yazılım Kodu Kanalına Abone Olun

Herkese merhaba,

Bu yazıda ProgressBar.js‘ın ne olduğundan bahsedeceğim.

ProgressBar.js web için duyarlı ve şık ilerleme çubukları oluşturmayı sağlayan bir kütüphanedir. ProgressBar.js animasyonları, mobil cihazlarda bile oldukça iyi performans gösterir. Line , Circle ve SemiCircle gibi şekiller mevcuttur. Herhangi bir vektör grafik düzenleyiciyle özel şekilli ilerleme çubukları da oluşturabilirsiniz .

ProgressBar.js hafif bir kütüphanedir ve MIT lisanslıdır ve IE9+ dahil tüm büyük tarayıcıları destekler.

Aşağıdaki kod yardımıyla siz de bu kütüphaneyi rahatlıkla kullanabilirsiniz.

HTML Kodu

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ProgressBar.js Nedir?</title>
</head>
<body>
  <div id="progressbar"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js"></script>
</body>
</html>

CSS Kodu

#progressbar {
  margin: 20px;
  width: 200px;
  height: 200px;
}

JAVASCRIPT Kodu

var bar = new ProgressBar.Circle(progressbar, {
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  duration: 1400,
  easing: 'bounce',
  strokeWidth: 6,
  from: {color: '#FFEA82', a:0},
  to: {color: '#ED6A5A', a:1},
  // Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
  }
});

bar.animate(1.0); 

Sitenizde kullanmak için linkini ziyaret ederek, kendinize göre revizeler yapabilirsiniz.

Kullanımı ile ilgili daha fazla detay için linkini ziyaret ederek detaylı kullanabilirsiniz.

Herkese çalışma hayatında ve yaşamında başarılar kolaylıklar.

25 Kez Okundu

Yavuz Selim Kart

Yazılım ve veri tabanında bildiklerimi anlatmaya gayret ediyorum. Halen birçok programlama dili üzerinde araştırmalar yaparak kendimi geliştiriyorum. Bunlar haricinde Grafik Tasarım ve Wordpress konularına da ilgim bulunmakta. SEO ve Sosyal medya yönetimleri hakkında da bilgim mevcuttur. Kısaca çok çalışmayı seven azimli biriyim.

You may also like...

Sitedeki yazıları kopyalamak yasaktır.