Thẻ progress trong HTML
Bùi Tấn Lực - 966
- 30/09/2025
Chức năng của Thẻ progress trong HTML
Thẻ progress trong HTML dùng để kiểm tra các tiến trình tải file, upload file hoặc quá trình hoàn thành biểu mẫu, nó truyền vào 2 giá trị: value (tiến trình hiện tại) và max (giá trị khi hoàn thành).
Code Thẻ progress trong HTML
Thẻ progress mặc định trong HTML
<label for="file">Đang tải tiến trình:</label>
<progress id="file" value="31" max="100"> 31% </progress><br>
<label for="file">Đang tải tiến trình:</label>
<progress id="file" value="70" max="100"> 70% </progress>
Thẻ progress hình tròn trong HTML
<!DOCTYPE html>
<html>
<head>
<title>Thẻ progress hình tròn trong HTML</title>
<style>
@property --progress-value {
syntax: '<integer>';
inherits: false;
initial-value: 0;
}
@keyframes html-progress {
to { --progress-value: 92; }
}
@keyframes css-progress {
to { --progress-value: 87; }
}
@keyframes js-progress {
to { --progress-value: 73; }
}
.progress-bar {
width: 100px;
height: 100px;
border-radius: 50%;
/* to center the percentage value */
display: flex;
justify-content: center;
align-items: center;
}
.progress-bar::before {
counter-reset: percentage var(--progress-value);
content: counter(percentage) '%';
}
.html {
background:
radial-gradient(closest-side, white 79%, transparent 80% 100%),
conic-gradient(hotpink calc(var(--progress-value) * 1%), pink 0);
animation: html-progress 2s 1 forwards;
}
.html::before {
animation: html-progress 2s 1 forwards;
}
.css {
background:
radial-gradient(closest-side, white 79%, transparent 80% 100%, white 0),
conic-gradient(hotpink calc(var(--progress-value) * 1%), pink 0);
animation: css-progress 2s 1 forwards;
}
.css::before {
animation: css-progress 2s 1 forwards;
}
.js {
background:
radial-gradient(closest-side, white 79%, transparent 80% 100%, white 0),
conic-gradient(hotpink calc(var(--progress-value) * 1%), pink 0);
animation: js-progress 2s 1 forwards;
}
.js::before {
animation: js-progress 2s 1 forwards;
}
body {
font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
margin: 30px auto;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
max-width: 600px;
}
h2 {
text-align: center;
}
progress {
visibility: hidden;
width: 0;
height: 0;
}
</style>
</head>
<body>
<h1>Thẻ progress mặc định trong HTML</h1>
<div class="progress-bar-container">
<h2>
<label for="html">HTML</label>
</h2>
<div class="progress-bar html">
<progress id="html" min="0" max="100" value="92"></progress>
</div>
</div>
<div class="progress-bar-container">
<h2>
<label for="css">CSS</label>
</h2>
<div class="progress-bar css">
<progress id="css" min="0" max="100" value="87"></progress>
</div>
</div>
<div class="progress-bar-container">
<h2>
<label for="js">JavaScript</label>
</h2>
<div class="progress-bar js">
<progress id="js" min="0" max="100" value="73"></progress>
</div>
</div>
</body>
</html>
Khi nào nên sử dụng thẻ progress và khi nào không nên?
Thẻ progress được thiết kế để hiển thị tiến trình hoàn thành của một tác vụ đang diễn ra. Việc sử dụng đúng ngữ cảnh giúp giao diện trực quan hơn, đồng thời hỗ trợ người dùng dễ theo dõi trạng thái xử lý. Tuy nhiên, không phải trường hợp nào cũng phù hợp để áp dụng thẻ này.
Trường hợp nên dùng thẻ progress
Nên sử dụng thẻ progress khi cần biểu diễn mức độ hoàn thành của một công việc có điểm bắt đầu và điểm kết thúc rõ ràng. Người dùng có thể dễ dàng biết quá trình đã hoàn thành bao nhiêu và còn lại bao nhiêu.
- Hiển thị tiến trình tải tệp lên hoặc tải tệp xuống.
- Thể hiện trạng thái cài đặt phần mềm hoặc cập nhật dữ liệu.
- Theo dõi quá trình xử lý biểu mẫu nhiều bước.
- Biểu diễn tiến độ sao lưu, nén hoặc giải nén dữ liệu.
- Thông báo tiến trình thực hiện một tác vụ trên trang web.
Nếu biết trước tổng khối lượng công việc, nên khai báo đầy đủ giá trị hiện tại và giá trị tối đa để thanh tiến trình phản ánh chính xác trạng thái đang xử lý.
Khi nào nên dùng thẻ meter thay vì progress
Thẻ progress và meter có mục đích khác nhau nên không thể thay thế cho nhau trong mọi trường hợp.
Hãy sử dụng meter khi cần hiển thị một giá trị nằm trong một khoảng xác định, thay vì tiến độ hoàn thành của một công việc.
- Mức sử dụng dung lượng ổ cứng.
- Tỷ lệ pin còn lại.
- Điểm đánh giá sản phẩm.
- Cường độ tín hiệu mạng.
- Mức sử dụng bộ nhớ hoặc CPU.
Nếu dữ liệu thể hiện một chỉ số hoặc mức đo tại thời điểm hiện tại thì meter là lựa chọn phù hợp hơn. Ngược lại, nếu dữ liệu phản ánh quá trình hoàn thành của một tác vụ thì nên sử dụng progress.
Những lỗi thường gặp khi sử dụng thẻ progress
Mặc dù cách sử dụng khá đơn giản, nhiều người vẫn mắc phải những lỗi khiến thanh tiến trình hoạt động không đúng hoặc gây khó hiểu cho người dùng.
- Dùng progress để hiển thị phần trăm pin, điểm số hoặc mức đánh giá.
- Khai báo giá trị hiện tại lớn hơn giá trị tối đa.
- Không cập nhật giá trị khi tiến trình thay đổi.
- Hiển thị thanh tiến trình nhưng không có tác vụ nào đang được thực hiện.
- Lạm dụng progress ở những vị trí không mang ý nghĩa theo dõi tiến độ.
Việc lựa chọn đúng loại phần tử giúp mã HTML có ý nghĩa hơn, cải thiện khả năng bảo trì và mang lại trải nghiệm trực quan cho người sử dụng.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ progress trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
