Thanh tiến trình có thể được sử dụng để hiển thị người dùng đang tiến hành bao xa trong một quy trình
Nhấp vào đây
Thanh tiến độ cơ bản
bình thường
phần tử có thể được sử dụng cho một thanh tiến trình
Thuộc tính chiều rộng CSS có thể được sử dụng để đặt chiều cao và chiều rộng của thanh tiến trình
Thí dụ
Tự mình thử »
Chiều rộng thanh tiến trình
Thay đổi độ rộng của thanh tiến trình bằng thuộc tính độ rộng CSS [từ 0 thành 100%]
Thí dụ
Tự mình thử »
Màu thanh tiến trình
Sử dụng các lớp màu w3 để thay đổi màu của thanh tiến trình
Thí dụ
Tự mình thử »
Nhãn thanh tiến trình
Thêm văn bản bên trong phần tử bộ chứa w3 để thêm nhãn vào thanh tiến trình
Sử dụng lớp w3-center để căn giữa nhãn. Nếu bỏ qua, nó sẽ được căn trái
Thí dụ
25%
Tự mình thử »
Kích thước văn bản trên thanh tiến trình
Sử dụng các lớp kích thước w3 để thay đổi kích thước văn bản trong vùng chứa
Thí dụ
50%
Tự mình thử »
Đệm thanh tiến trình
Sử dụng các lớp đệm w3 để thêm phần đệm vào vùng chứa
Thí dụ
25%
Tự mình thử »
Thanh tiến độ tròn
Sử dụng các lớp w3-round để thêm các góc tròn vào thanh tiến trình
Thí dụ
25%
Tự mình thử »
Thanh tiến độ động
Sử dụng JavaScript để tạo thanh tiến trình động
Nhấp vào đây
Thí dụ
Nhấp vào đây
Tự mình thử »
Thanh tiến độ động có nhãn
nhãn trung tâm
Nhãn căn trái
Nhãn bên ngoài thanh tiến trình
Một ví dụ khác [nâng cao]
Eijaz Khan
Làm theo
Ngày 5 tháng 9 năm 2021
·
3 phút đọc
Thanh tiến trình từng bước trong CSS
Ảnh bìa
Tạo thanh tiến trình Step đơn giản trong HTML, CSS và JavaScript
HTML_______0_______Đầu ra của HTML
HTML Output
@import url['//fonts.googleapis.com/css?family=Muli&display=swap'];:root {--line-border-fill: #3498db;--line-border-empty: #e0e0e0;}* {box-sizing: border-box;}body {background-color: #f6f7fb;font-family: 'Muli', sans-serif;display: flex;align-items: center;justify-content: center;height: 100vh;overflow: hidden;margin: 0;}.container {text-align: center;}.progress-container {display: flex;justify-content: space-between;position: relative;margin-bottom: 30px;max-width: 100%;width: 350px;}.progress-container::before {content: '';background-color: var[--line-border-empty];position: absolute;top: 50%;left: 0;transform: translateY[-50%];height: 4px;width: 100%;z-index: -1;}.progress {background-color: var[--line-border-fill];position: absolute;top: 50%;left: 0;transform: translateY[-50%];height: 4px;width: 0%;z-index: -1;transition: 0.4s ease;}.circle {background-color: #fff;color: #999;border-radius: 50%;height: 30px;width: 30px;display: flex;align-items: center;justify-content: center;border: 3px solid var[--line-border-empty];transition: 0.4s ease;}.circle.active {border-color: var[--line-border-fill];}.btn {background-color: var[--line-border-fill];color: #fff;border: 0;border-radius: 6px;cursor: pointer;font-family: inherit;padding: 8px 30px;margin: 5px;font-size: 14px;}.btn:active {transform: scale[0.98];}.btn:focus {outline: 0;}.btn:disabled {background-color: var[--line-border-empty];cursor: not-allowed;}Javascript
const progress = document.getElementById['progress']const prev = document.getElementById['prev']const next = document.getElementById['next']const circles = document.querySelectorAll['.circle']let currentActive = 1next.addEventListener['click', [] => {currentActive++if[currentActive > circles.length] {currentActive = circles.length}update[]}]prev.addEventListener['click', [] => {currentActive--if[currentActive < 1] {currentActive = 1}update[]}]function update[] {circles.forEach[[circle, idx] => {if[idx < currentActive] {circle.classList.add['active']} else {circle.classList.remove['active']}}]const actives = document.querySelectorAll['.active']progress.style.width = [actives.length - 1] / [circles.length - 1] * 100 + '%'if[currentActive === 1] {prev.disabled = true} else if[currentActive === circles.length] {next.disabled = true} else {prev.disabled = falsenext.disabled = false}}
đầu ra
đầu ra
Blog của tôi. https. // người mới bắt đầu-nhà phát triển. blogspot. com
Tham chiếu mã. - https. //github. com/bradtraversy/50projects50days/tree/master/progress-steps
Xem trước. - https. //50dự án50 ngày. com/projects/progress-bước/