定製進度條修改challange

Question

我想一個讓所看到下面的圖片中progrss吧。

我不能做的是

• 得出的數字之間的連接線
• 活躍的數量將有一個更大的圈子
• 完成的步驟將有一個綠色的線和未完成用灰線。

幫助，請。

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>