stepbar less mixin

In this example below you will see how to do a stepbar less mixin with some HTML / CSS and Javascript

This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on
Copyright tibomahe ©
  • HTML
  • CSS
  • JavaScript
  <ul class="step-bar">
    <li><a href="#">Step 1</a></li>
    <li><a href="#">Step 2</a></li>
    <li><a href="#">Step 3</a></li>
    <li class="active"><a href="#">Step 4</a></li>

/*Downloaded from */
@gray: #636363;
@green: green;

//mixin "make step bar"
.make-step-bar(@steps-number) {
  	  width: 600px;
	  margin: 30px auto;
	  counter-reset: step;
	  text-align: center;
	  @media (max-width: 767px){
	 	 width: 320px;
		 padding: 0;
	  li {
		list-style-type: none;
		color: @gray;
		text-transform: uppercase;
		font-size: 14px;
		width: 100% / @steps-number;
		float: left;
		position: relative;
		a:before {
		  content: counter(step);
		  counter-increment: step;
		  width: 50px;
		  line-height: 50px;
		  display: block;
		  font-size: 20px;
		  background: @gray;
		  color: white;
		  border-radius: 50%;
		  margin: 0 auto 5px auto;
		  padding-left: 5px;
	  &:before {
	  	content: normal;
	  &:after { /* line */
		  content: '';
		  width: 100%;
		  height: 2px;
		  background: @gray;
		  position: absolute;
		  left: -50%;
		  top: 24px;
		  z-index: -1;
	  &:first-child:after {
		  content: none; 
	  &.active a:before {
		  background: @green;
	  @media (max-width: 767px){
	 	font-size: 12px;

a {
  color: @gray;
  &:hover {
    color: @green;
    text-decoration: none;

section {
	padding-bottom: 80px;
	.step-bar {

/*Downloaded from */