ใช้แท็ก <progress> ใน HTML5 เพื่อแสดงความคืบหน้าของงาน ช่วยสร้าง Progress Bar ได้อย่างง่ายดาย
แอตทริบิวต์ของแท็ก <progress>
| แอตทริบิวต์ | ค่า | คำอธิบาย |
|---|---|---|
max |
Number (float > 0) | ค่าสูงสุดของความคืบหน้า ต้องมากกว่า 0 และเป็นตัวเลขทศนิยมที่ถูกต้อง ค่าเริ่มต้นคือ 1 |
value |
Number (float) | ค่าปัจจุบันของความคืบหน้า ต้องอยู่ระหว่าง 0 ถึง max (หรือ 0 ถึง 1 ถ้าไม่มี max) |
ตัวอย่าง
ลองรันโค้ดต่อไปนี้เพื่อสร้าง Progress Bar:
<!DOCTYPE html>
<html>
<head>
<title>HTML Progress Tag</title>
</head>
<body>
<h2>Water Level</h2>
<progress value="60" max="100"></progress>
<h2>Download Progress</h2>
<progress value="45" max="100">45%</progress>
<h2>Indeterminate (ไม่ระบุค่า)</h2>
<progress></progress>
</body>
</html>
Indeterminate Progress Bar
ถ้าไม่ระบุแอตทริบิวต์ value จะได้ Indeterminate Progress Bar (แถบที่เคลื่อนไหวต่อเนื่อง) ใช้เมื่อไม่รู้ว่าจะเสร็จเมื่อไหร่
การจัดสไตล์ด้วย CSS
การจัดสไตล์ <progress> ต้องใช้ Pseudo-elements เฉพาะเบราว์เซอร์:
/* WebKit/Blink (Chrome, Safari, Edge) */
progress::-webkit-progress-bar {
background-color: #eee;
border-radius: 10px;
}
progress::-webkit-progress-value {
background: linear-gradient(90deg, #4caf50, #8bc34a);
border-radius: 10px;
}
/* Firefox */
progress::-moz-progress-bar {
background: linear-gradient(90deg, #4caf50, #8bc34a);
border-radius: 10px;
}
/* Fallback */
progress {
width: 100%;
height: 20px;
border: none;
border-radius: 10px;
overflow: hidden;
}
การอัปเดตด้วย JavaScript
<progress id="myProgress" value="0" max="100"></progress>
<button onclick="updateProgress()">Simulate Progress</button>
<script>
function updateProgress() {
const progress = document.getElementById('myProgress');
let value = 0;
const interval = setInterval(() => {
value += 10;
progress.value = value;
if (value >= 100) clearInterval(interval);
}, 500);
}
</script>
ความแตกต่าง: <progress> vs <meter>
<progress>- ความคืบหน้าของงาน (Task completion) - มีทิศทาง: เริ่ม 0 ไปจนถึง max<meter>- ค่าสเกลาร์ในช่วงที่รู้จัก (Scalar gauge) - เช่น อุณหภูมิ, การใช้หน่วยความจำ, คะแนนสอบ
