<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'>
<form>
<div class="steps">
<div class="steps__step" data-step="0">
<div class="steps__step-number">1</div>
<div class="steps__step-name">About You</div>
</div>
<div class="steps__connector"></div>
<div class="steps__step" data-step="1">
<div class="steps__step-number">2</div>
<div class="steps__step-name">About Book</div>
</div>
<div class="steps__connector"></div>
<div class="steps__step" data-step="2">
<div class="steps__step-number">3</div>
<div class="steps__step-name">Review</div>
</div>
<div class="steps__connector"></div>
<div class="steps__step" data-step="3">
<div class="steps__step-number">4</div>
<div class="steps__step-name">Signing</div>
</div>
<div class="steps__connector"></div>
<div class="steps__step" data-step="4">
<div class="steps__step-number">5</div>
<div class="steps__step-name">Contract</div>
</div>
</div>
<div class="btn-group">
<button class="btn" type="button" data-action="prev" disabled>Previous</button>
<button class="btn" type="button" data-action="next">Next</button>
</div>
</form>
</body>
* {
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%);
--primary: hsl(var(--hue),90%,30%);
--trans-dur: 0.3s;
--trans-timing: cubic-bezier(0.65,0,0.35,1);
font-size: calc(16px + (48 - 16) * (100vw - 280px) / (3840 - 280));
}
body,
button {
font: 1em/1.5 "DM Sans", sans-serif;
}
body {
background-color: var(--bg);
color: var(--fg);
display: flex;
height: 100vh;
}
form {
container: form/inline-size;
margin: auto;
padding: 1.5em;
width: 100%;
max-width: 36em;
}
.btn {
background-color: var(--primary);
border-radius: 0.25em;
color: white;
cursor: pointer;
display: block;
padding: 0.375em 0.75em;
transition: background-color var(--trans-dur) var(--trans-timing), opacity var(--trans-dur) var(--trans-timing);
width: 100%;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
.btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn:not(:disabled):hover {
background: hsl(var(--hue), 90%, 10%);
}
.btn-group {
display: flex;
justify-content: center;
gap: 0.75em;
margin-top: 1.5em;
}
.steps {
background-color: white;
border-radius: 0.75em;
display: flex;
padding: 1.5em;
flex-direction: column;
justify-content: center;
width: 100%;
}
.steps__connector, .steps__step {
position: relative;
}
.steps__connector {
background-color: hsl(var(--hue), 10%, 80%);
margin-inline-start: 0.75em;
width: 0.125em;
height: 1.25em;
transform: translateX(-50%);
transition: background-color var(--trans-dur);
}
.steps__connector:before {
background-color: var(--primary);
content: "";
display: block;
width: 100%;
height: 100%;
transform: scale(1, 0);
transform-origin: 50% 0;
transition: background-color var(--trans-dur), transform var(--trans-dur) var(--trans-timing);
}
.steps__step {
display: flex;
align-items: center;
flex-shrink: 0;
z-index: 1;
}
.steps__step-name {
color: hsl(var(--hue), 10%, 50%);
font-size: 0.75em;
line-height: 2;
transition: color var(--trans-dur) var(--trans-timing), font-weight var(--trans-dur) var(--trans-timing);
}
.steps__step-number {
background-color: hsl(var(--hue), 10%, 80%);
color: white;
border-radius: 50%;
margin-inline-end: 0.5em;
text-align: center;
width: 1.5em;
height: 1.5em;
transition: background-color var(--trans-dur) var(--trans-timing), box-shadow var(--trans-dur) var(--trans-timing);
}
.steps__step--current .steps__step-name, .steps__step--done .steps__step-name {
color: hsl(var(--hue), 10%, 10%);
font-weight: 700;
}
.steps__step--current .steps__step-number, .steps__step--done .steps__step-number {
background-color: var(--primary);
}
.steps__step--current .steps__step-number, .steps__step--current .steps__step-name {
transition-delay: var(--trans-dur);
}
.steps__step--current .steps__step-number {
box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 30%, 0.4);
}
.steps__step--done + .steps__connector:before {
transform: scale(1, 1);
}
/* Change layout depending on form width */
@container form (min-width: 30em) {
.btn {
width: auto;
}
.steps {
flex-direction: row;
align-items: center;
padding: 1.5em 2.25em 2.25em 2.25em;
}
.steps__connector {
margin-inline-start: 0;
width: 100%;
height: 0.125em;
transform: translateY(-50%);
}
.steps__connector:before {
transform: scale(0, 1);
transform-origin: 0 50%;
}
[dir=rtl] .steps__connector:before {
transform-origin: 100% 50%;
}
.steps__step-name {
position: absolute;
top: 100%;
left: 50%;
text-align: center;
width: 6em;
transform: translateX(-50%);
}
.steps__step-number {
margin-inline-end: 0;
}
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),10%,10%);
--fg: hsl(var(--hue),10%,90%);
--primary: hsl(var(--hue),90%,70%);
}
.btn {
color: hsl(var(--hue), 10%, 10%);
}
.btn:not(:disabled):hover {
background: hsl(var(--hue), 90%, 50%);
}
.steps {
background-color: hsl(var(--hue), 10%, 20%);
}
.steps__connector {
background-color: hsl(var(--hue), 10%, 40%);
}
.steps__step-name {
color: hsl(var(--hue), 10%, 50%);
}
.steps__step-number {
background-color: hsl(var(--hue), 10%, 40%);
color: hsl(var(--hue), 10%, 20%);
}
.steps__step--current .steps__step-name, .steps__step--done .steps__step-name {
color: hsl(var(--hue), 10%, 90%);
}
.steps__step--current .steps__step-number {
box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 70%, 0.4);
}
}
"use strict";
window.addEventListener("DOMContentLoaded", () => {
const steps = new StepIndicator(".steps");
});
class StepIndicator {
/**
* @param el CSS selector of the step indicator element
*/
constructor(el) {
/** Number of steps */
this.steps = 5;
this._step = 0;
this.el = document.querySelector(el);
document.addEventListener("click", this.clickAction.bind(this));
this.displayStep(this.step);
this.checkExtremes();
}
get step() {
return this._step;
}
set step(value) {
this.displayStep(value);
this._step = value;
this.checkExtremes();
}
/**
* @param e Click event
*/
clickAction(e) {
const button = e.target;
const actionName = button === null || button === void 0 ? void 0 : button.getAttribute("data-action");
if (actionName === "prev") {
this.prev();
}
else if (actionName === "next") {
this.next();
}
}
/** Go to the previous step. */
prev() {
if (this.step > 0) {
--this.step;
}
}
/** Go to the next step. */
next() {
if (this.step < this.steps - 1) {
++this.step;
}
}
/** Disable the Previous or Next button if hitting the first or last step. */
checkExtremes() {
const prevBtnEl = document.querySelector(`[data-action="prev"]`);
const nextBtnEl = document.querySelector(`[data-action="next"]`);
if (prevBtnEl) {
prevBtnEl.disabled = this.step <= 0;
}
if (nextBtnEl) {
nextBtnEl.disabled = this.step >= this.steps - 1;
}
}
/**
* Update the indicator for a targeted step.
* @param targetStep Index of the step
*/
displayStep(targetStep) {
var _a;
const current = "steps__step--current";
const done = "steps__step--done";
for (let s = 0; s < this.steps; ++s) {
const stepEl = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-step="${s}"]`);
stepEl === null || stepEl === void 0 ? void 0 : stepEl.classList.remove(current, done);
if (s < targetStep) {
stepEl === null || stepEl === void 0 ? void 0 : stepEl.classList.add(done);
}
else if (s === targetStep) {
stepEl === null || stepEl === void 0 ? void 0 : stepEl.classList.add(current);
}
}
}
}
