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);
    }
}