CODEWITHSUNDEEP
htmlcssprogress
Kiwimoisi
Kiwimoisi

Reputation: 4192

Progress bar CSS and HTML only

I have been trying to build a progress bar only made out of HTML and CSS, although having some difficulties getting the "connected dots" style.

Because it's based on the :After elements how can I have them behind the circles , sort of z-indexed ?

Ideally the dot 1 should connect 2 , 2 connect 3, and 3 connect 4.

https://jsfiddle.net/bzjs1h9r/1/

<section class="steps">
<ul class="checkout">
  <li class="current">
    <div class="index">...</div>
    <div class="caption">Email</div>
  </li>
  <li class="inactive">
    <div class="index">2</div>
    <div class="caption">Your Info</div>
  </li>
  <li class="inactive">
    <div class="index">3</div>
    <div class="caption">Delivery</div>
  </li>
  <li class="inactive">
    <div class="index">4</div>
    <div class="caption">Review</div>
  </li>
</ul>


.steps {
.checkout {
  display: table;
  table-layout: fixed;
  width: 100%;
  li {
    display: table-cell;
    padding-left: 0;
    text-align: center;

    &:before {
      margin: 0 auto;
      display: block;
      width: 30px;
      height: 30px;
      content: "";
      text-align: center;
      float: none;
      position: relative;
      top: 30px;
      border-radius: 100%;
      border: 2px solid #79b93e;
    }

    &:after {
      content: "";
      border: 1px solid rgba(135, 135, 135, 0.2);
      width: 100%;
      webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(180deg);
      display: block;
      position: absolute;
      top: 60px;
      right: -53px;
    }


    &:last-child {
      &:after {
        display: none;
      }
    }

    .caption {
      text-transform: uppercase;
      margin-top: 5px;
      font-weight: 900;
    }
  }
}
.container-fluid  {
    max-width: 550px;
    overflow:hidden;
}

}

Upvotes: 1

Views: 2578

Answers (3)

MattLaza
MattLaza

Reputation: 199

I had a very similar issue when l came across this link. It provides an example of how to create a progress bar using css alone. I just pulled out the css and used it in my project.

http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar

Here is a fiddle with a basic example https://jsfiddle.net/matt_laza/6rdurftm/

#progressbar { margin-bottom: 30px; text-align:center;	overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step}
#progressbar li {width:25%; list-style-type: none; text-transform: uppercase; font-size: 11px; float: left; position: relative;}
#progressbar li:before { content: counter(step);counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 10px; color: #333; background: #CCC; border-radius: 3px; margin: 0 auto 5px auto;}
#progressbar li:after {	content: ''; width: 100%; height: 2px; background: #CCC; position: absolute; left: -50%; top: 9px; z-index: -1; /*put it behind the numbers*/}
#progressbar li:first-child:after { /*connector not needed before the first step*/ content: none;}
#progressbar li.active:before, #progressbar li.active:after{ background: #27AE60; color: white;}
<ul id="progressbar">
    <li class="active">Email</li>
    <li>Info</li>
    <li>Delivery</li>
    <li>Review</li>
</ul>

Upvotes: 2

Razia sultana
Razia sultana

Reputation: 2221

 <div class="container">
<ul class="progressbar">
<li class="active">EMAIL</li>
<li>YOUR INFO</li>
<li>DELIVERY</li>
<li>REVIEW</li> 
<ul>
</div> 

.container{ 
width:100%;
} 
.progressbar{ 
counter-reset:step;
}
 .progressbar li{
list-style-type: none;
float:left; 
width:22.22%;
position:relative;
text-align:center;
}
.progressbar li:before{
content:counter(step);
counter-increment:step;
width:30px;
height:30px;
line-height:30px;
border:1px solid #0F0;
display:block;
text-align:center;
margin:0 auto 10px auto;
border-radius:50%;
}
.progressbar li:after{
content:'';
position:absolute;
width:100%;
height:1px;
background-color:#ddd;
top:15px;
left:-50%;
z-index:-1; 
}
progressbar li:first-child:after{
content:none;
}

Upvotes: 0

amow
amow

Reputation: 2223

Your problem here is you miss to set position:relative to li. The connect line of li:after is absolute to first not position:inherit ancestor, body if none, in your version the line should be absolute to the li element.

https://jsfiddle.net/bzjs1h9r/2/

my fixes: 

li {
  position:relative;
  &.index: {
    position:relative;
    z-index: 3;
  }
  &:before {
    z-index: 2;
    background: #fff;
  }
  &:after {
    z-index: 1;  
  }
}

and also some position adjustments.

ps: the rotate of li:after seems meaningless here.

Upvotes: 2

Related Questions