css3实现渐变进度条

时间：2020-09-18 03:35:28 收藏：0 阅读：57

渐变进度条，如图：

技术图片

实现：

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