HTML progress tag | belajar <progress> element

Referensi Belajar HTML progress tag. Tutorial dan panduan mengenai element <progress>...</progress> yang digunakan untuk menampilkan proses kegiatan atau tugas. Mencakup pembahasan lebih detail dan lengkap yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <progress>.


Deskripsi
Penjelasan HTML progress tag

HTML <progress> element merepresentasikan berlangsungnya (progres) suatu kegiatan atau tugas.

Progress tag ditampilkan dalam sebuah progress bar yang menampilkan proses berlangsungnya kegiatan. Sehingga, kita bisa mengetahui sudah sampai mana dan kapan kegiatan atau proses tersebut berakhir. Untuk memanipulasi nilai dari <progress> bar ini, dapat memanfaatkan kode javascript.

Element <progress> tidak tepat digunakan untuk menunjukkan sebuah meteran atau ukuran (gauge), seperti mengukur kapasitas hardisk / flashdisk atau sejenisnya. Untuk menunjukkan sebuah ukuran, dapat menggunakan element <meter>.

Attributes
Atribut HTML Tag <progress>

max

Menentukkan jumlah maksimal kegiatan atau tugas tersebut diperlukan.

value

Menentukkan jumlah, sampai berapa kegiatan atau tugas tersebut telah dilaksanakan.


Global Attributes
Atribut Secara Global (Keseluruhan)

<progress> tag mencakup global attributes.

Event Attributes
Atribut event (Peristiwa)

<progress> tag mencakup event attributes.

Attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example
Contoh HTML <progress> element

HTML
<progress value="22" max="100"></progress>

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML progress tag</title>
    <style>

    </style>
  </head>
  <body>
    <progress value="22" max="100"></progress>
  </body>
</html>
SHARE