SUNIPEYK

Meter ve Progress

Hem az bilinen hem de az kullanılan Html5 elemanlarından Meter ve Progress‘i kısaca inceleyelim ve örnek verelim.

Meter

Meter öğesi gösterge olarak kullanabiliyor. 10’da 2 gibi veya yüzde 60 gibi değerler ile bir bar üzerinde göstermemize yarıyor.

Örnek

10’da 2 göstermek istersek;
10’da 2
<meter value="2" min="0" max="10">10'da 2</meter>
Kodu gayet kolay; value kısmına bir değer giriyoruz ve min ve max değerleri belirtiyoruz.
Bunu istersek 100’de 20 olarak da gösterebiliriz.
100’de 20
Ya da;
Yüzde 20 (%20) şeklinde göstermek istersek;
20%
olarak da gösterebiliyoruz.
<meter value="0.2">20%</meter>
Bu kullanım daha kısa ve kolay elbette.
Neyse hangisi kolayınıza geliyorsa onu kullanın işte.

Progress

Meter’e benzemesine rağmen bu aslında biraz farklı. Bir görevin ilerleme durumunu göstermesi bekleniyor. JavaScript kullanarak dinamik olarak bir görevin ilerleme durumunu göstermede kullanılabiliyor. Statik olarak kullanıldığında yukarıdaki örneklere benziyor, ancak.

Örnek

Görevin %20si bitirildiyse;

<progress value="20" max="100"></progress>

Görüldüğü gibi yukarıdaki örneklere benziyor ancak aynı değil. %20, 30, 40 … görevin ilerleme durumunu göstermek istercesine yeşil bar kısmında bir hareket var. Bu kısım Firefox için. Diğer tarayıcılarda ise Progress yeşil renkte değil mavi olarak ön tanımlı görünmektedir.
Madem istenmiyor, durağan veriler için Progress öğesini kullanmayalım.

Öğeleri Şekillendirme

Meter ve Progress öğeleri CSS ile şekillendirmek, renkleri ile oynamak isterseniz How to use the Meter & Progress Elements bağlantısında örnekleri inceleyebilirsiniz.

Ayrıntılar ve Özet Öğelerini de merak ediyor olabilirsiniz. Onları da yazmıştık.