Follow Us On Telegram
Get Full Source Code Zipped File
Telegram link Download Code
HTML
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodeAtNow - Progress Step Form</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <div class="container"> <div class="progress-wrapper"> <div class="progress" id="progress"></div> <div class="circle active">1</div> <div class="circle">2</div> <div class="circle">3</div> <div class="circle">4</div> </div> <button class="btn" id="prev" disabled>Prev</button><button class="btn" id="next">Next</button> </div> <!-- partial --> <script src="./script.js"></script> </body> </html>
CSS
body { font-family: "Inter", sans-serif; display: flex; flex-direction: column; height: 100vh; overflow: hidden; align-items: center; justify-content: center; margin: 0; background: #fefefe; } * { box-sizing: border-box; } :root { --progress-bar__empty: #eee; --progress-bar__fill: #6c5ce7; } .container { text-align: center; } .progress-wrapper { display: flex; position: relative; justify-content: space-between; width: 50vw; max-width: 100%; margin-bottom: 20px; } .progress-wrapper::before { content: ""; width: 100%; background: #eee; position: absolute; top: 50%; left: 0; height: 4px; transform: translatey(-50%); z-index: -1; } .progress { position: absolute; background-color: var(--progress-bar__fill); width: 0; top: 50%; left: 0; height: 4px; z-index: -1; transform: translatey(-50%); transition: 0.2s linear; } .circle { color: #999; background-color: #fff; border-radius: 50%; height: 30px; width: 30px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--progress-bar__empty); transition: 0.4s ease; } .circle.active { border: 3px solid var(--progress-bar__fill); } .btn { background-color: var(--progress-bar__fill); color: #fff; font-family: inherit; border: 0; border-radius: 6px; padding: 8px 30px; font-size: 14px; margin: 8px; } .btn:active { transform: scale(0.95); } .btn:disabled { background-color: var(--progress-bar__empty); cursor: not-allowed; } .btn:focus { outline: 0; }
JS
const next = document.getElementById("next"); const prev = document.getElementById("prev"); const progress = document.getElementById("progress"); const steps = document.getElementsByClassName("circle"); let activeIndex = 0; const setActive = (toggle, index) => { progress.style.width = `${(toggle ? index : index - 1) * (100 / 3)}%`; steps[index].classList.toggle("active", toggle); }; next.addEventListener("click", () => { activeIndex += 1; setActive(true, activeIndex); prev.disabled = false; if (activeIndex === steps.length - 1) { next.disabled = true; } }); prev.addEventListener("click", () => { next.disabled = false; setActive(false, activeIndex); activeIndex -= 1; if (activeIndex === 0) { prev.disabled = true; } });