Monday , November 20 2017
Home / HTML 5 / Contoh Penggunaan Tag Progress Di HTML 5

Contoh Penggunaan Tag Progress Di HTML 5

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.

Contoh Penggunaan Tag Progress Di HTML 5
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.

 

About Firdan Ardiansyah

Admin di lebakcyber.net

Untuk berhubungan dengan saya, silahkan kirim email ke : firdan@lebakcyber.net

Leave a Reply

Your email address will not be published. Required fields are marked *