ProgressBar.js Nedir?
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.
