benutzerdefinierte Fortschrittsbalken Änderung Herausforderung

Question

Ich versuche, eine Progrss Bar wie in der folgenden Abbildung zu sehen.

Was ich nicht in der Lage bin zu tun ist, um

• eine Verbindungslinie zwischen den Zahlen ziehen
• aktive Nummer wird
• abgeschlossen Schritte, um eine grüne Linie haben einen größeren Kreis hat und unvollendete mit grauer Linie.

Hilfe bitte.

Custom progress bar

css

.custom-progress-bar ul li span { 
    width: 27px; 
    height: 27px; 
    background: #cbcbcb; 
    color:#fff; 
    float: right; 
    border-radius: 50%; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    text-align: center; 
    margin-left: 14px; 
    font-size: 18px; 
    line-height: 28px; 

} 
.custom-progress-bar ul { 

    list-style:none; 
} 

.custom-progress-bar .last{ 
width: 80px; 
border-radius: 20px; 
} 

.custom-progress-bar .completed{ 
    background: #9cc656; 
    color:#fff; 
} 

html

<div class="custom-progress-bar"> 
        <ul> 
        <li><span class="bubble"><a href="#">1</a></span></li> 
        <li><span class="bubble"><a href="#">2</a></span></li> 
        <li><span class="bubble"><a href="#">3</a></span></li> 
        <li><span class="bubble completed"><a href="#">4</a></span></li> 
        <li><span class="bubble"><a href="#">5</a></span></li> 
        <li><span class="bubble last"><a href="#">finish</a></span></li> 
        </ul> 
        </div> 

Answer 1

Sie können mit diesem Code starten:

a { 
 
    color: #fff; 
 
} 
 
.custom-progress-bar ul li span { 
 
    width: 27px; 
 
    height: 27px; 
 
    background: #cbcbcb; 
 
    color:#fff; 
 
    display: block; 
 
    border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    text-align: center; 
 
    
 
    font-size: 18px; 
 
    line-height: 28px; 
 
} 
 
.custom-progress-bar ul { 
 
    list-style:none; 
 
} 
 

 
.custom-progress-bar .last { 
 
width: 80px; 
 
border-radius: 20px; 
 
} 
 

 
.custom-progress-bar ul li { 
 
    display: inline-block; 
 
    margin-left: 14px; 
 
    border-radius: 50%; 
 
    width: 27px; 
 
    height: 27px; 
 
} 
 

 
.custom-progress-bar ul li::after { 
 
    display: block; 
 
    content: ''; 
 
    height: 2px; 
 
    width: 20px; 
 
    margin-top: -14px; 
 
    margin-left: -20px; 
 
    background: #cbcbcb; 
 
} 
 

 
.custom-progress-bar ul li:first-child::after { 
 
    display: none; 
 
} 
 

 
.custom-progress-bar li.completed { 
 
    margin-right: 2px; 
 
    border: 4px solid #fff; 
 
    -webkit-box-shadow: 0px 0px 0px 2px rgba(156,198,86,1); 
 
    -moz-box-shadow: 0px 0px 0px 2px rgba(156,198,86,1); 
 
    box-shadow: 0px 0px 0px 2px rgba(156,198,86,1); 
 
} 
 

 
.custom-progress-bar li.completed::after { 
 
    margin-left: -24px; 
 
} 
 

 
.custom-progress-bar li.completed + li span { 
 
    background: #9cc656; 
 
} 
 

 
.custom-progress-bar li.completed + li + li span { 
 
    background: #9cc656; 
 
} 
 

 
.custom-progress-bar li.completed + li::after { 
 
    background: #9cc656; 
 
} 
 

 
.custom-progress-bar li.completed + li + li::after { 
 
    background: #9cc656; 
 
}

<div class="custom-progress-bar"> 
 
    <ul> 
 
     <li><span class="bubble"><a href="#">1</a></span></li> 
 
     <li><span class="bubble"><a href="#">2</a></span></li> 
 
     <li><span class="bubble"><a href="#">3</a></span></li> 
 
     <li class="completed"><span class="bubble"><a href="#">4</a></span></li> 
 
     <li><span class="bubble"><a href="#">5</a></span></li> 
 
     <li><span class="bubble last"><a href="#">finish</a></span></li> 
 
    </ul> 
 
</div>