HTML progress Tag

Tutorial HTML <progress>

HTML progress Tag - belajar html progress, element <progress> dipergunakan untuk menampilkan progres yang sedang berlangsung.

Element <progress> ini biasanya digunakan untuk bar loading page, menampilkan status upload file berupa bar dan lain sebagainya.

Element ini dikususkan untuk sistem kerja yang sedang berlangsung, bukan untuk mengukur sebuah hasil yang sudah diketahui hasilnya, untuk penggunaan hasil ukuran gunakan element <meter>. Selengkapnya mengenai html <meter>

Dalam penggunaannya pada html, element <progress> sangat erat terkait penggunaannya dengan javascript sebagai kontrol element <progres>.

Attribute HTML <progress> :

value

Attribute value pada HTML <progress> ini menentukan jumlah atau nilai progress yang ditampilkan.

Nilai atau value attribute ini adalah Nomor / angka

max

Attribute max pada HTML <progress> ini menentukan jumlah Maksimal dari nilai progress yang ditampilkan.

Nilai atau value attribute ini adalah Nomor / angka

Global Attributes:

Element <progress> mencakup Global Attributes HTML.

Event Attributes:

Element <progress> mencakup Event Attributes HTML.

Contoh penerapan HTML <progress>

<progress id="progress" value="40" max="100">
  Maaf browser anda tidak suport dengan element progress
</progress>

Contoh 2 penerapan HTML <progress>

Contoh berikut dengan melakukan proses DOM element pada element <progress> pada saat loading page dimulai

Contoh HTML

<progress 
   id="progress" 
   value="0" 
   max="100">
</progress>

Contoh Javascript

function demo() {
  var e = document.getElementById("progress");
  setInterval(demo, 100), e.value += 1
}

Browser Support :

Chrome	8.0
Safari	6.0
Firefox	16.0
Opera	11.0
IE / Edge	10.0

Default CSS :

Browser yang support dengan element <progress>, biasanya mempunyai nilai default :

/* none */

Artinya tiap tiap browser mempunyai tampilan css masing masing untuk element <progress>