Thẻ progress trong HTML là gì? Muốn hiển thị tiến trình công việc thì làm sao?
Thẻ progress là gì? Muốn hiển thị lên trình duyệt 1 thanh tiến trình, tiến độ chẳng hạn thì phải làm sao? Với thẻ progress thì khúc mắc này sẽ được giải quyết.
Thẻ Progress trong HTML là gì?
Thẻ này dùng để tạo ra 1 thanh trạng thái, về tiến trình xử lí được bao nhiêu % rồi.
Bạn có thể hiểu như việc bạn có khối công việc trên web khi bạn hoàn thành hết chúng là sẽ có 1 thanh tiến trình hiển thị 100% báo rằng bạn đã hoàn thành công việc, hay nếu bạn chỉ làm 1 nữa công việc thì thanh tiến trình sẽ hiện 50%. Như vậy đối với thẻ Progress thì bạn có thể tạo 1 thanh tiến trình,
Cú pháp và cách sử dụng thẻ Progress HTML
Cú pháp:
<progress max="giá trị" value="giá trị"></progress>
Thường thì ở thẻ progress sẽ có 2 thẻ thuộc tính để xác định giá trị hiện tại:
| Thuộc tính | Chức năng |
| max | Xác định tổng khối lượng việc |
| value | Khối lượng việc còn lại |
Để hiểu rõ hơn các bạn xem ví dụ sau đây của mình:
<!DOCTYPE html>
<html>
<head></head>
<body>
<progress max="100" value="50">50</progress>
</body>
</html>
Nếu như không sử dụng attribute thì kết quả các bạn xem tại đường link sau: Không dùng attribute
Giải nghĩa: Attribute các bạn có thể hiểu nó chính là các thuộc tính bên trong 1 thẻ chính, ví dụ như thẻ Progress là thẻ chính, còn thẻ max và value là 2 thẻ giá trị (thẻ thuộc tính) đặt trong thẻ chính progress. Thì ta gọi là thẻ max và value là 2 attribute.
Mẹo: Thông thường người ta sẽ sử dụng thẻ Progress với Javascript để hiển thị tiến trình được mềm mại và linh hoạt hơn.
Thẻ không phù hợp để đại diện cho một thước đo (ví dụ: sử dụng dung lượng đĩa hoặc mức độ liên quan của kết quả truy vấn). Để thể hiện một đơn vị đo, hãy sử dụng thẻ meter để thay thế.
Kết luận: Muốn hiên thị chỉ số tiến trình, thì sử dụng thẻ Progress để hiển thị trên trình duyệt.
Nếu bài viết hay và hữu ích thì đừng nhớ Like Share để mọi người cùng biết nhé!
