Bir web sayfası ya da web uygulaması yazarken bazen kullanıcıya gönderdikleri isteklerinin ne durumda olduğunu göstermek gerekebilir. Örneğin bu bir dosya yükleme ya da video oynatma veya belirli bir eklentinin yüklenme işlemi olabilir. Bu durumlar için Html5 de <progress> etiketi vardır. Her tarayıcı bu element için kendi stiline sahip olsada css ile bunu değiştirmek mümkündür.
<progress> etiketi için 4 özellik belirtilmiştir: max ,value,position ve labels. Eğer bir value değeri belirtilmişse progress bar determinate (yani belirli bir limiti var ) olarak düşünülür. Eğer bir value değeri yoksa indeterminate olarak düşünülür.
Eğer max değeri belirtilmemişse varsayılan kapsamı 0.0 ile 1.0 arasında kabul edilir.
Max: Bu özellik işlemin tamaıyla bitmiş sayılabilmesi için ne kadara ihtiyacı olduğunu gösterir. Örnek olarak max = 100 ise değer 100 olduğunda işlem bitmiş sayılır. Bar sonuna kadar dolar. Varsayılan değeri 1.0 dır.
Value: Bu özellik işemin şu anki konumunu gösterir. 0.0 dan büyük 1.0 dan yada max değerinden küçük olmalıdır.
Position: Bu sadece okunabir özellik <progress> elemanın şu an ki pozisyonunu döndürür. Bu değer value/max değerine eşit yada -1 (progress barın pozisyonu tam belirlemediğinde) olmaktadır.
Labels: Bu sadece okunabir özellik <progress> elemanlarının eğer varsa labelerinin bir listesini geri döndürür
Progress Barı kontrol etmek için javascript ile yapılmış bir örnek.
<!DOCTYPE html>
<html>
<head>
<title> HTML5 progress etiketi </title>
</head>
<body>
<progress id='pb' value='0' max='100'><span>0</span>%</progress>
<span id='deger'>0%</span>
<div class='buttons'>
<input id='ekle' type='button' value='10 arttır' />
<input id='sifirla' type='button' value='Sıfırla' />
</div>
<script>
var pBar = document.getElementById('pb');
var val = document.getElementById('deger');
var updateProgress = function(value) {
pBar.value = value;
var percent = Math.floor(value)
pBar.getElementsByTagName('span')[0].innerHTML = percent;
val.innerHTML = percent + '%';
}
var up = document.getElementById('ekle');
up.addEventListener('click', function() {
var currentVal = parseInt(pBar.value);
if (currentVal < 100) updateProgress(parseInt(currentVal + 10));
}, false);
document.getElementById('sifirla').addEventListener('click', function() {
updateProgress(0);
up.innerHTML = '0%';
}, false);
</script>
</body>
</html>
Firefox tarayıcısındaki görünümü:
Butona basıldıkça değeri 10 arttıracak bir fonksiyon yazdık.
