Lebak Cyber Tips dan Trik Komputer
Contoh Penggunaan Tag Progress Di HTML 5
Lebakcyber.net – Pada kesempatan kali ini kita akan membahas mengenai contoh penggunaan tag Progress di HTML 5. Tag progress ini biasanya digunakan untuk menampilkan progress dari suatu tugas, misalnya progress pada saat kamu mengupload sebuah file melalui halaman web. Tag progress merupakan sesuatu yang baru di HTML 5, jadi kamu membutuhkan browser dengan versi terbaru yang mendukung HTML 5 agar dapat menjalankan tag progress ini.
Attribute pada Tag Progress di HTML 5
Tag Progress mendukung 2 buah attribute yang dapat kamu gunakan
|
Tag |
Penjelasan |
| Value | Menerangkan seberapa banyak proses yang sudah dilakukan |
| Max | Menerangkan seberapa banyak total progress yang dibutuhkan |
Contoh Penggunaan Tag Progress di HTML 5
Buat sebuah file html baru lalu berinama contoh_progress.html lalu masukan perintah berikut ini :
Proses Download<progress value=”23” max=”100”></progress>
Sekarang coba jalankan file contoh_progress.html tersebut.
Progress Bar Dengan Style
Kamu juga dapat menambahkan style CSS kedalam tag progress. Contohnya seperti berikut ini :
<!DOCTYPE><html>
<title>Lebakcyber.net</title>
<head>
<style>
progress{width:300px;height:30px}
</style>
</head>
<body>
<progress value="50" max="100"></progress>
</body>
</html>
Tag Progress HTML Dengan JavaScript
Tag Progress juga dapat digunakan untuk menampilkan jalannya file progress tersebut dengan menggunakan JavaScript. Silahkan ketikan perintah berikut ini pada file contoh_progress.html yang sebelumnya sudah dibuat :
<!DOCTYPE>
<html>
<title>Lebakcyber.net</title>
<body>
<script>
var nilai=1;
function lebakcyber(){
var progressExample = document.getElementById ('progress-javascript-example');
setInterval (function ()
{
if(nilai<100){
nilai++;
progressExample.value =nilai;
}
lebakcyber();
}, 1000);
}
</script>
<progress id="progress-javascript-example" min="1" max="100"></progress>
<br/><br/>
<button onclick="lebakcyber()">klik Disini</button>
</body>
</html>
Coba jalankan file contoh_progress.html tersebut di browser lalu klik tombol Klik Disini, nanti progress bar akan berjalan secara otomatis sampai variable nilai memiliki nilai 100 dan akan berhenti jika variable nilai sudah memiliki nilai 100.
Oke seperti itulah contoh penggunaan tag Progress di HTML 5 yang dapat kamu gunakan untuk membuat sebuah progress bar di website yang sedang kamu buat, misalnya menggunakan tag progress ini di website kamu pada saat mengupload file kedalam website.
Jangan lupa untuk selalu berkunjung ke lebakcyber.net untuk mendapatkan tutorial belajar HTML 5 lainnya. Sampai jumpa di tutorial mengenai komputer lainnya ya.
