Blog Belajar HTML: Tag progress HTML

Tag <progress> digunakan untuk menampilkan suatu proses task (tugas) yang sedang berlangsung. Contoh sederhananya, bayangkan ketika Anda mengcopy suatu file ke flashdisk, saat proses copy berlangsung, itu ada progress bar (warna hijau) yang bergerak ke arah kanan menunjukkan tahap proses pengopian.

Proses copy file dengan progress bar warna hijau.

Beberapa atribut tag <progress>:

max : nilai maksimal yang menandakan proses selesai.
value : nilai proses yang sedang berlangsung (sedang dikerjakan).

Note: Progress bar HTML hanya bersifat statis, progress bar tidak bergerak sesuai tahap proses tugas yang dikerjakan, jika ingin membuatnya bergerak (dinamis) dengan tambahan javascript, silahkan pelajari di sini.

Contoh tag <progress> HTML (statik): progress.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag progress html</title>
        </head>
    <body>
        Contoh tag progress:<br />
        <progress value="90" max="150">90 %</progress>
    </body>
</html>

Output:

Tampilan tag <progress> di Firefox.

Referensi tulisan:

<progress>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 06 Desember 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Friday, December 5, 2014

Tag progress HTML

No comments:

Post a Comment