I have successfully created a unique step progress bar using CSS, and my next objective is to implement page transitions using Javascript. My plan involves utilizing iframes to contain the pages, but I am currently stuck on how to control the transition using Javascript. Below is the HTML/CSS code snippet for reference.
body {
color: #01ab97;
}
.progress {
margin: 100px auto;
}
ul {
text-align: center;
}
ul li {
display: inline-block;
width: 100px;
position: relative;
}
ul li .fa {
background-color: #ccc;
width: 18px;
height: 18px;
color: #fff;
border-radius: 50%;
padding: 5px;
}
ul li .fa::after {
content: '';
background-color: #ccc;
height: 5px;
width: 105px;
display: block;
position: absolute;
left: 0;
top: 63px;
z-index: -1;
}
ul li:nth-child(3) .fa {
background-color: #148e14;
}
ul li:nth-child(3) .fa::after {
background-color: #148e14;
}
ul li:nth-child(1) .fa,
ul li:nth-child(2) .fa {
background-color: #60aa97;
}
ul li:nth-child(1) .fa::after,
ul li:nth-child(2) .fa::after {
background-color: #60aa97;
}
ul li:first-child .fa::after {
width: 55px;
left: 50px;
}
ul li:last-child .fa::after {
width: 55px;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>STEPS PROGRESS BAR</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="progress">
<ul>
<!-- Add your list items here -->
</ul>
</div>
</body>
</html>If you have any innovative ideas or suggestions, please share them with me. Thank you!