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> :
valueAttribute
value pada HTML <progress> ini menentukan jumlah atau nilai progress yang ditampilkan.maxAttribute
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 dimulaiContoh 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 :
| 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>