Thanh tiến trình bước CSS

Thanh tiến trình từng bước trong CSS

Tạo thanh tiến trình Step đơn giản trong HTML, CSS và JavaScript

Đầu ra của HTML

@import url('https://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;}

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

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/