A Pen by Andreas Eracleous on CodePen.
Created
September 20, 2020 11:57
-
-
Save TomGalla11/4fabe2bf60de4eef1fcd1e34c24f5c97 to your computer and use it in GitHub Desktop.
Checkout Progress Bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="checkout-wrap"> | |
<ul id="checkout-bar" class="step1"> | |
<li class="step1"><span>Select</span></li> | |
<li class="step2"><span>Review</span></li> | |
<li class="step3"><span>Payment</span></li> | |
<li class="step4"><span>Success</span></li> | |
</ul> | |
</div> | |
<div class="space"></div> | |
<button id="btn-progress" type="button" class="btn btn-success">Next</button> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
$("#btn-progress").click(function() { | |
var classes = ['step1', 'step2', 'step3', 'step4']; | |
$('#checkout-bar').each(function() { | |
this.className = classes[($.inArray(this.className, classes) + 1) % classes.length]; | |
}); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
*:before, | |
*:after { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
body { | |
font-family: 'PT Sans', sans-serif; | |
font-size: 14px; | |
background-color: #eee; | |
} | |
.container { | |
max-width: 1200px; | |
margin: 0 auto; | |
} | |
.checkout-wrap { | |
padding: 30px 50px; | |
background-color: #fff; | |
border-radius: 5px; | |
overflow: hidden; | |
} | |
#checkout-bar { | |
position: relative; | |
width: 100%; | |
padding: 0; | |
margin: 0 auto; | |
list-style: none; | |
float: left; | |
clear: both; | |
} | |
#checkout-bar li { | |
position: relative; | |
width: 25%; | |
float: left; | |
text-align: center; | |
color: #999; | |
text-transform: uppercase; | |
} | |
#checkout-bar li:after { | |
position: relative; | |
content: ""; | |
display: inline-block; | |
width: 15px; | |
height: 15px; | |
top: 2.5px; | |
left: 50%; | |
border: 2px solid #ddd; | |
background-color: #fff; | |
border-radius: 100%; | |
z-index: 4; | |
} | |
#checkout-bar.step1 .step1:after, | |
#checkout-bar.step2 .step2:after, | |
#checkout-bar.step3 .step3:after, | |
#checkout-bar.step4 .step4:after { | |
background-color: #82a91c; | |
-webkit-transition: width 2s; | |
/* Safari */ | |
transition: all 3s; | |
} | |
#checkout-bar li span { | |
position: relative; | |
display: block; | |
left: 50%; | |
} | |
#checkout-bar:before, | |
#checkout-bar:after { | |
position: absolute; | |
content: ""; | |
top: 50%; | |
bottom: 0; | |
left: 0; | |
width: 100%; | |
height: 3px; | |
margin: auto 0; | |
background-color: #c3c3c3; | |
z-index: 1; | |
} | |
#checkout-bar.step1:after, | |
#checkout-bar.step2:after, | |
#checkout-bar.step3:after, | |
#checkout-bar.step4:after { | |
width: 25%; | |
background-color: #82a91c; | |
z-index: 2; | |
-webkit-transition: width 2s; | |
/* Safari */ | |
transition: width 2s; | |
} | |
#checkout-bar.step2:after { | |
width: 50%; | |
} | |
#checkout-bar.step3:after { | |
width: 75%; | |
} | |
#checkout-bar.step4:after { | |
width: 100%; | |
} | |
button { | |
border: none; | |
background: none; | |
} | |
.btn { | |
display: inline-block; | |
padding: 6px 12px; | |
margin-bottom: 0; | |
font-size: 14px; | |
font-weight: 400; | |
line-height: 1.42857143; | |
text-align: center; | |
white-space: nowrap; | |
vertical-align: middle; | |
-ms-touch-action: manipulation; | |
touch-action: manipulation; | |
cursor: pointer; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
background-image: none; | |
border: 1px solid transparent; | |
border-radius: 4px; | |
} | |
.btn-success { | |
display: block; | |
min-width: 220px; | |
margin: 0 auto; | |
text-transform: uppercase; | |
color: #fff; | |
background-color: #5cb85c; | |
border-color: #4cae4c; | |
} | |
.btn-success:hover { | |
color: #fff; | |
background-color: #449d44; | |
border-color: #398439; | |
} | |
.btn.focus, | |
.btn:focus, | |
.btn:hover { | |
color: #fff; | |
text-decoration: none; | |
} | |
.space { | |
width: 100%; | |
float: left; | |
clear: both; | |
height: 50px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment