चरण

Question

के साथ सीएसएस कैल्क() का उपयोग करके हमने एक शुद्ध सीएसएस आधार प्रगति पट्टी का उपयोग किया है।

मुख्य सीएसएस भाग नीचे जैसा है।

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

............... 

एचटीएमएल

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

पूरा नमूना https://jsfiddle.net/wbj7e79p/ में पाया जा सकता है।

जैसा कि आप इसे सात चरणों के लिए गड़बड़ कर सकते हैं। कारण .progressbar li width है जो 25% पर तय किया गया है, हम इसे चरणों की संख्या पर गतिशील आधार बनाना चाहते थे।

तो हमने चौड़ाई की कोशिश की: calc (100%/steps) या calc (100%/counter(steps)) लेकिन उनमें से कोई भी काम नहीं किया। कोई उपाय !

---

कृपया विचार है कि हम एक घटक है जो मक्खी पर एक प्रगति बार निर्माण निर्माण कर रहे हैं, इसलिए हम चरणों

Answer 1

आप 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>