css3實現漸變進度條

漸變進度條，如圖：

 

 

實現：

dom：

<div className={s.progress}>
    <div className={s.bar} style={{ width:'73%'}}/>
</div>

 

css：外層div設置背景色有透明度，內層div設置漸變，有寬度，有圓角

.progress{
    background-color: rgba(15,182,217,0.3);
    border-radius:px-vh(10);
    .bar{
        background:linear-gradient(90deg,rgba(15,182,217,1),rgba(1,255,255,1));
        border-radius:px-vh(10);
    }
}