引導進度條技能

Question

如何以下

progress bar

Answer 1

創建一個進度條，自舉類的形象，我相信這是你想要做什麼：

https://codepen.io/laurenglegg/pen/ayEpVe

<div class="labels"> 
    <span>HTML5</span> 
    <span>95%</span> 
</div> 
<div class="progress"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 95%;"> 
    </div> 
</div> 

body { 
    padding: 50px; 
} 
.labels { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 5px; 
} 
.labels span { 
    color: #666; 
} 
.progress { 
    height: 5px; 
} 
.progress-bar { 
    background: -webkit-linear-gradient(left, #33156d 0%, #f282bc 100%); 
    /* Chrome10-25,Safari5.1-6 */ 
}