html yapısı
<div class="progress-bar">
<div class="progressing" data-rate="67"></div>
</div>
iki div açtık. birinci div konteynır görevi görecek. ikinci div ise progress ilerleyişini sağlayacak. Classı progressing olan div html5 atteibute olan data tagini barındırındırıyor. düzgün çalışması adına doctype html5 uyumlu olduğundna emin olmalısınız. data-rate progress barın ilerlemesini istediğiniz miktarı gösrerir. eğer data-rate içerisine 99 yazarsak 0 dan 99% a kadar ilerleyecektir.
css yapısı
.progress-bar {
width : 100px;
height: 20 px;
background: black;
}
.progress-bar .progressing {
float: left;
width: 0%;
height: inherit;
background: white;
}
float left yazmamızın sebebi soldan sağa doğru ilerlemesi için. eğer sağdan soşa doğru uzamasını istiyorsanız float right yazabilirsiniz,
jQUERY
$(function(){
var progress = $("progressing");
progressing.each(function(){
var thisData = $(this).data("rate"); // thisData değeri progress barın ilerleyeceği miktar
$(this).animate({
width: thisData // genişlik thisData değeri kadar anime olacak
}, 300, "linear");
});
});
each fonksiyonu içerisine almamızın sebebi bütün progress barları kendi içinde çalıştırmak içindir
0 yorum:
Yorum Gönder