ใช้แท็ก <progress> เพื่อสร้างแถบความคืบหน้าใน HTML แท็ก HTML <progress> ระบุความคืบหน้าของงานเสร็จสิ้น แสดงเป็นแถบความคืบหน้า (progress bar) ค่าของแถบความคืบหน้าสามารถจัดการได้โดย JavaScript
แอตทริบิวต์
| แอตทริบิวต์ | ค่า | คำอธิบาย |
|---|---|---|
| max | number | ค่าสูงสุด ต้องมากกว่า 0 และเป็น floating point number ที่ถูกต้อง |
| value | number | ระบุว่างานเสร็จไปเท่าไหร่ ควรเป็น floating point 0 ถึง max (หรือ 0-1 หากไม่มี max) |
ตัวอย่าง
คุณสามารถลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การสร้างแถบความคืบหน้าในหน้าเว็บ:
<!DOCTYPE html>
<html>
<head>
<title>HTML Progress Tag</title>
</head>
<body>
<h1>กำลังโหลด</h1>
<progress value="65" max="100"></progress>
</body>
</html>
ความแตกต่าง <progress> vs <meter>:
- <progress> - ความคืบหน้าของงาน (progress toward completion) - ไม่ทราบค่าสูงสุดก็ได้
- <meter> - ค่าสเกลาร์ในช่วงที่รู้จัก (scalar measurement within known range) - ต้องมี min/max
การควบคุมด้วย JavaScript:
const progress = document.querySelector('progress');
progress.value = 75; // อัปเดตค่า
progress.max = 200; // เปลี่ยนค่าสูงสุด
