カスタムプログレスバー修正案件

Question

私は下の図のようにプログラムバーを作ろうとしています。私が行うことができませんどのような

は

• へ
• アクティブ数が
• 完了したステップは、灰色の線と緑のラインと未完了を持って大きな円を持っています数字の間の接続線を引くです。

助けてください。

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

あなたは、このコードで起動することができます。

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>