Create Vertical Stepper Using HTML and CSS
Create Vertical Stepper Using HTML and CSS
Welcome to the Codewithrandom blog. In this article, We learn how to create a Vertical Stepper Using Html,Css and JavaScript. Vertical Stepper Is Number Sliding in a page to another page like if we have on number 1 page that show in bottom that we can move next page using Vertical Stepper.
I hope you enjoy our blog so let’s start with a basic HTML Structure for a Vertical Stepper.
50+ HTML, CSS & JavaScript Projects With Source Code
Code by | Jon Kantner |
Project Download | Link Available Below |
Language used | HTML, CSS and JavaScript |
External link / Dependencies | No |
Responsive | Yes |
Html Code For Vertical Stepper
<button class="stepper" type="button" value="0"> <span class="stepper__value" data-pos="off-left" aria-hidden="true" >-2</span > <span class="stepper__value" data-pos="prev" aria-hidden="true">-1</span> <span class="stepper__value" data-pos="cur">0</span> <span class="stepper__value" data-pos="next" aria-hidden="true">1</span> <span class="stepper__value" data-pos="off-right" aria-hidden="true" >2</span > <span class="stepper__btn-area"> <span class="stepper__btn-click" data-dir="down"></span> </span> <span class="stepper__btn-area"> <span class="stepper__btn-click" data-dir="up"></span> </span> </button>
There is all HTML code for the Vertical Stepper project. Now, you can see output without CSS And Javascript. then we write css & javascript for the Vertical Stepper project code.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Html output of Vertical Stepper
CSS Code Vertical Stepper
* { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),10%,90%); --fg: hsl(var(--hue),10%,10%); font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320)); } body, button { font: 1em/1.5 Inter, sans-serif; } body { background-color: var(--bg); color: var(--fg); height: 100vh; display: grid; place-items: center; transition: background-color 0.3s; } .stepper { background-color: var(--fg); border-radius: 1em; box-shadow: 0 0.75em 1em hsla(0,0%,0%,0.2); color: var(--bg); font-weight: bold; overflow: hidden; padding: 0.75em 0.375em; position: relative; width: 6em; height: 3em; transition: background-color 0.3s, color 0.3s, transform 0.15s ease-in-out; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: #0000; } .stepper:active { transform: scale(0.95); transition-delay: 0s, 0s, 0.15s; } .stepper__btn-area, .stepper__btn-area:before, .stepper__btn-click, .stepper__value { position: absolute; } .stepper__btn-area, .stepper__btn-area:before, .stepper__btn-click { display: block; top: 0; left: 0; } .stepper__btn-area { width: 2em; height: 3em; } .stepper__btn-area + .stepper__btn-area { right: 0; left: auto; } .stepper__btn-area:before { border-radius: 50%; box-shadow: 0 0 0 0 var(--bg) inset; content: ""; opacity: 0; pointer-events: none; top: 0.5em; width: 2em; height: 2em; transform: scale(2.5); transition: all 0.4s ease-out; } .stepper__btn-area:not(:disabled):active:before { box-shadow: 0 0 0 1em var(--bg) inset; opacity: 0.25; transform: scale(1); transition: opacity 0.2s ease-out, transform 0.2s ease-out; } .stepper__btn-click { width: 100%; height: 100%; } .stepper__value { animation-duration: 0.3s; animation-timing-function: ease-in-out; display: inline-block; font-size: 1.5em; line-height: 1; top: calc(50% - 0.75rem); left: calc(50% - 1rem); text-align: center; width: 2rem; height: 1.5rem; -webkit-user-select: none; user-select: none; } .stepper__value[data-pos="off-left"], .stepper__value[data-pos="prev"], .stepper__value[data-pos="next"], .stepper__value[data-pos="off-right"] { opacity: 0.5; } .stepper__value[data-pos="off-left"] { transform: translateX(-2.67em) scale(0.5); } .stepper__value[data-pos="prev"] { transform: translateX(-1.33em) scale(0.5); } .stepper__value[data-pos="cur"] { transform: translateX(0); } .stepper__value[data-pos="next"] { transform: translateX(1.33em) scale(0.5); } .stepper__value[data-pos="off-right"] { transform: translateX(2.67em) scale(0.5); } .stepper--move-left .stepper__value[data-pos="off-left"] { animation-name: moveOffLeft; } .stepper--move-left .stepper__value[data-pos="prev"] { animation-name: middleToLeft; } .stepper--move-left .stepper__value[data-pos="cur"] { animation-name: rightToMiddle; } .stepper--move-left .stepper__value[data-pos="next"] { animation-name: comeInRight; } .stepper--move-right .stepper__value[data-pos="prev"] { animation-name: comeInLeft } .stepper--move-right .stepper__value[data-pos="cur"] { animation-name: leftToMiddle } .stepper--move-right .stepper__value[data-pos="next"] { animation-name: middleToRight; } .stepper--move-right .stepper__value[data-pos="off-right"] { animation-name: moveOffRight; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),10%,20%); --fg: hsl(var(--hue),10%,90%); } } /* Animations */ @keyframes comeInRight { from { transform: translateX(2.67em) scale(0.5); } to { transform: translateX(1.33em) scale(0.5); } } @keyframes rightToMiddle { from { opacity: 0.5; transform: translateX(1.33em) scale(0.5); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes middleToLeft { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0.5; transform: translateX(-1.33em) scale(0.5); } } @keyframes moveOffLeft { from { transform: translateX(-1.33em) scale(0.5); } to { transform: translateX(-2.67em) scale(0.5); } } @keyframes comeInLeft { from { transform: translateX(-2.67em) scale(0.5); } to { transform: translateX(-1.33em) scale(0.5); } } @keyframes leftToMiddle { from { opacity: 0.5; transform: translateX(-1.33em) scale(0.5); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes middleToRight { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0.5; transform: translateX(1.33em) scale(0.5); } } @keyframes moveOffRight { from { transform: translateX(1.33em) scale(0.5); } to { transform: translateX(2.67em) scale(0.5); } }
Here is our updated output Of Css Code.
Portfolio Website Using HTML ,CSS and Javascript Source Code
Html Css Output Of Vertical Stepper
Javascript Code Vertical Stepper
window.addEventListener("DOMContentLoaded",() => { const stepper = new SlidingStepper(".stepper",{ step: 1, min: -9, value: 0, max: 99 }); }); class SlidingStepper { constructor(qs,args) { const { step, min, value, max } = args; this.el = document.querySelector(qs); this.step = step !== undefined ? step : 1; this.min = min !== undefined ? min : -9; this.value = value !== undefined ? value : 0; this.max = max !== undefined ? max : 99; this.valuePos = 0; this.values = []; this.posData = [ "off-left", "prev", "cur", "next", "off-right" ]; this.init(); this.changeValue(); if (this.el) { this.el.addEventListener("click",this.changeValue.bind(this)); this.el.addEventListener("keydown",this.changeValue.bind(this)); } } init() { // ensure step is a number above 0, or suffer an infinite loop later if (this.step < 1 || isNaN(this.step)) this.step = 1; // handle a value being outside bounds if (this.value < this.min) this.value = this.min; else if (this.value > this.max) this.value = this.max; // ensure min is less than max, or make it same as max if (this.min > this.max) this.min = this.max; // load values before initial… for (let l = this.value; l >= this.min; l -= this.step) this.values.unshift(l); this.values.unshift(this.min); // …then those after it for (let r = this.value; r <= this.max; r += this.step) this.values.push(r); this.values.push(this.max); // kill the dupes this.values = [...new Set(this.values)]; // initial value this.valuePos = this.values.indexOf(this.value); } changeValue(e) { // get the direction let dir = null; if (e) { const { key, target } = e; if (key) { if (key === "ArrowUp" || key === "ArrowRight") dir = "up"; else if (key === "ArrowDown" || key === "ArrowLeft") dir = "down"; } else { dir = target.getAttribute("data-dir"); } } // reset the animation const cl = this.el ? this.el.classList : null; if (cl) { cl.remove("stepper--move-left","stepper--move-right"); void this.el.offsetWidth; } // increment or decrement, apply the animation if (dir === "up" && this.valuePos < this.values.length - 1) { ++this.valuePos; cl.add("stepper--move-left"); } else if (dir === "down" && this.valuePos > 0) { --this.valuePos; cl.add("stepper--move-right"); } this.value = this.values[this.valuePos]; this.el.value = this.value; // update the display if (this.el) { this.posData.forEach((p,i) => { const pos = this.el.querySelector(`[data-pos="${p}"]`); if (pos) { const relIndex = this.valuePos + (i - 2); const value = this.values[relIndex]; pos.innerText = value !== undefined ? value : ""; } }); } } }
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Final Output Of Vertical Stepper
Now we have completed our Vertical Stepper Using HTML, CSS, and JavaScript. Here is our updated output with javascript code. I hope you like the Vertical Stepper. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!
10+ Javascript Project Ideas For Beginners( Project Source Code)
In this post, we learn how to create a Vertical Stepper using simple HTML, CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
Codepen by – Jon Kantner
Which code editor do you use for this Vertical Stepper coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
No!