tRikSonic

HTML progress Tag

Terakhir diperbarui : 22 Mei 2018 - 11.48

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>.
html progress

Attribute HTML <progress> :

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

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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

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

</body>
</html>

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
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>

<style>
#progress {
    width: 100%;
    display: block;
}
</style>

</head>
<body onload="demo();">

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

<p>Klik tombol Run untuk mengulang Proses</p>

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

</body>
</html>

Browser Support :

Chrome8.0
Safari6.0
Firefox16.0
Opera11.0
IE / Edge10.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>
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.