Geek Answers Handbook

Using css calc () in increments

We used a clean css progress line.

The bulk of css is given below.

.container { width: 600px; margin: 20px auto; } .progressbar { margin: 0; padding: 0; counter-reset: step; } .progressbar li { list-style-type: none; width: 25%; float: left; font-size: 12px; position: relative; text-align: center; text-transform: uppercase; color: #7d7d7d; } .progressbar li:before { width: 30px; height: 30px; content: counter(step); counter-increment: step; line-height: 30px; border: 2px solid #7d7d7d; display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; background-color: white; } .progressbar li:after { width: 100%; height: 2px; content: ''; position: absolute; background-color: #7d7d7d; top: 15px; left: -50%; z-index: -1; } ...............

html

 <div class="container"> <ul class="progressbar"> <li class="active">login</li> <li>choose interest</li> ........

The full sample can be found at https://jsfiddle.net/wbj7e79p/ .

As you can see, this is a seven step mess. The reason .progressbar li width , which is tied to 25% , we wanted to make it a dynamic base in the number of steps.

So, we tried width: calc (100% / steps) or calc (100% / counter(steps)) , but none of them worked. Any idea!

Please note that we are building a component that creates a progress bar on the fly, so we cannot find the actual number of steps

+6
source share
1 answer

Did you consider flexbox?

 body { font-family: 'Alegreya Sans', sans-serif; margin: 0; padding: 0; } .container { margin: 20px auto; } .progressbar { margin: 0; padding: 0; counter-reset: step; display: flex; } .progressbar li { list-style-type: none; flex: 1; font-size: 12px; position: relative; text-align: center; text-transform: uppercase; color: #7d7d7d; } .progressbar li:before { width: 30px; height: 30px; content: counter(step); counter-increment: step; line-height: 30px; border: 2px solid #7d7d7d; display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; background-color: white; } .progressbar li:after { width: 100%; height: 2px; content: ''; position: absolute; background-color: #7d7d7d; top: 15px; left: -50%; z-index: -1; } .progressbar li:first-child:after { content: none; } .progressbar li.active { color: green; } .progressbar li.active:before { border-color: #55b776; } .progressbar li.active + li:after { background-color: #55b776; } 
 <h1>Four Steps</h1> <div class="container"> <ul class="progressbar"> <li class="active">login</li> <li>choose interest</li> <li>add friends</li> <li>View map</li> </ul> </div> <h1> Seven Steps</h1> <div class="container"> <ul class="progressbar"> <li class="active">login</li> <li>choose interest</li> <li>add friends</li> <li>remove</li> <li>fix users</li> <li>review</li> <li>save all</li> </ul> </div>
+5
source

More articles:


All Articles