Thanh tiến trình CSS Tailwind chỉ có CSS với các biến thể màu chính, phụ, trọng âm và ngữ nghĩa. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Các thành phần tiến trình trực quan hóa trạng thái hoàn thành của nhiệm vụ, nội dung tải xuống hoặc quy trình gồm nhiều bước. Được xây dựng bằng các phần tử tiến trình HTML ngữ nghĩa và kiểu CSS Tailwind, các thanh tiến trình truyền đạt tiến trình một cách rõ ràng cho người dùng. Hệ thống tiến trình Frutjam hỗ trợ nhiều màu sắc, kích thước và trạng thái hoạt ảnh để tích hợp linh hoạt vào màn hình tải, biểu mẫu và trang tổng quan.
Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
| Lớp học | Kiểu | Sự miêu tả |
|---|---|---|
| progress | Căn cứ | Thanh tiến trình ngang |
| progress-primary | Màu sắc | Màu chủ đề chính |
| progress-secondary | Màu sắc | Màu chủ đề phụ |
| progress-accent | Màu sắc | Màu chủ đề nhấn mạnh |
| progress-neutral | Màu sắc | Màu chủ đề trung tính |
| progress-info | Màu sắc | Màu sắc ngữ nghĩa thông tin |
| progress-success | Màu sắc | Màu ngữ nghĩa thành công |
| progress-warning | Màu sắc | Màu ngữ nghĩa cảnh báo |
| progress-error | Màu sắc | Lỗi ngữ nghĩa màu sắc |
Các biến thể màu
Mặc định
1 2 3 4 5 | <progress class="progress w-56" value="0" max="100"></progress> <progress class="progress w-56" value="25" max="100"></progress> <progress class="progress w-56" value="50" max="100"></progress> <progress class="progress w-56" value="75" max="100"></progress> <progress class="progress w-56" value="100" max="100"></progress> |
1 2 3 4 5 | <progress className="progress w-56" value="0" max="100"></progress> <progress className="progress w-56" value="25" max="100"></progress> <progress className="progress w-56" value="50" max="100"></progress> <progress className="progress w-56" value="75" max="100"></progress> <progress className="progress w-56" value="100" max="100"></progress> |
Sơ đẳng
html
1 2 3 4 5 | <progress class="progress progress-primary w-56" value="0" max="100"></progress> <progress class="progress progress-primary w-56" value="25" max="100"></progress> <progress class="progress progress-primary w-56" value="50" max="100"></progress> <progress class="progress progress-primary w-56" value="75" max="100"></progress> <progress class="progress progress-primary w-56" value="100" max="100"></progress> |
Sơ trung
html
1 2 3 4 5 | <progress class="progress progress-secondary w-56" value="0" max="100"></progress> <progress class="progress progress-secondary w-56" value="25" max="100"></progress> <progress class="progress progress-secondary w-56" value="50" max="100"></progress> <progress class="progress progress-secondary w-56" value="75" max="100"></progress> <progress class="progress progress-secondary w-56" value="100" max="100"></progress> |
Giọng
html
1 2 3 4 5 | <progress class="progress progress-accent w-56" value="0" max="100"></progress> <progress class="progress progress-accent w-56" value="25" max="100"></progress> <progress class="progress progress-accent w-56" value="50" max="100"></progress> <progress class="progress progress-accent w-56" value="75" max="100"></progress> <progress class="progress progress-accent w-56" value="100" max="100"></progress> |
Trung lập
html
1 2 3 4 5 | <progress class="progress progress-neutral w-56" value="0" max="100"></progress> <progress class="progress progress-neutral w-56" value="25" max="100"></progress> <progress class="progress progress-neutral w-56" value="50" max="100"></progress> <progress class="progress progress-neutral w-56" value="75" max="100"></progress> <progress class="progress progress-neutral w-56" value="100" max="100"></progress> |
Thông tin
html
1 2 3 4 5 | <progress class="progress progress-info w-56" value="0" max="100"></progress> <progress class="progress progress-info w-56" value="25" max="100"></progress> <progress class="progress progress-info w-56" value="50" max="100"></progress> <progress class="progress progress-info w-56" value="75" max="100"></progress> <progress class="progress progress-info w-56" value="100" max="100"></progress> |
Thành công
html
1 2 3 4 5 | <progress class="progress progress-success w-56" value="0" max="100"></progress> <progress class="progress progress-success w-56" value="25" max="100"></progress> <progress class="progress progress-success w-56" value="50" max="100"></progress> <progress class="progress progress-success w-56" value="75" max="100"></progress> <progress class="progress progress-success w-56" value="100" max="100"></progress> |
Cảnh báo
html
1 2 3 4 5 | <progress class="progress progress-warning w-56" value="0" max="100"></progress> <progress class="progress progress-warning w-56" value="25" max="100"></progress> <progress class="progress progress-warning w-56" value="50" max="100"></progress> <progress class="progress progress-warning w-56" value="75" max="100"></progress> <progress class="progress progress-warning w-56" value="100" max="100"></progress> |
Lỗi
html
1 2 3 4 5 | <progress class="progress progress-error w-56" value="0" max="100"></progress> <progress class="progress progress-error w-56" value="25" max="100"></progress> <progress class="progress progress-error w-56" value="50" max="100"></progress> <progress class="progress progress-error w-56" value="75" max="100"></progress> <progress class="progress progress-error w-56" value="100" max="100"></progress> |
Using Claude Code, Cursor, or another AI editor?
Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp Tiến triển chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.