Progress bar CSS and HTML only

Question

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; }

}

Can you elaborate your question? Why can't you use "z-index" property? — Arjun
– Arjun, Commented Sep 1, 2016 at 2:40

amow · Accepted Answer · 2016-09-01 02:47:15Z

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.

Max Maxymenko · Accepted Answer · 2016-09-01 03:44:02Z

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>

Razia sultana · Accepted Answer · 2016-09-01 03:30:10Z

 <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; }

Collectives™ on Stack Overflow

Progress bar CSS and HTML only

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related