LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
  1. Login
  2. Confirm order
  3. Payment

I made a new version of it, prettier and flexible. Check it out!

CSS
/* BODY */
body {
  padding: 50px 0;
  font-family: Helvetica, Sans-serif;
}

/* PROGRESS TRACKER */
.progress-tracker {
  display: block;
  margin: 0;
  counter-reset: item;
  list-style-type: none;
  overflow: auto;
  position: relative;
  width: 100%;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: .075em
}
.progress-tracker .step:before {
  background: #aaa;
  border-radius: 40px;
  color: #FFFFFF;
  content: "";
  display: list-item;
  font-size: 18px;
  line-height: 1.8em;
  padding: 0 0 0 13px;
  position: absolute;
  width: 35px;
  height: 35px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  content: counter(item) "  "; 
  counter-increment: item;
}
.progress-tracker .step {
	display: block;
  float: left;
  list-style-position: inside;
  width: 33%;
}
.progress-tracker .step .step-name{
	border-top: 8px solid #aaa;
  display: block;
  margin: 15px 0;
  padding: 20px 0;
}
/*last step*/
.progress-tracker .step:last-child { width: auto;}
.progress-tracker .step:last-child .step-name{ border-color: transparent;}

/*active step*/
.progress-tracker .step.active .step-name {color: #666}
.progress-tracker .step.active:before {background: #666;}
Host Instantly Drag and Drop Website Builder

 

Description

Progress tracker for visualizing steps to permorm an action.
Term
Wed, 11/29/2017 - 11:24

Related Codes

Pen ID
Pen ID
Pen ID