进度条怎么实现成俩边圆角

分类：uni-app

组件

进度条怎么实现成俩边圆角求助

2019-12-03 16:14 负责人:无分享

3 个回复

退役熬夜选手

<view class="progress_bar round">
<view class="progress_bar_con" :style="'width:'+num+'%;'"></view>
</view>
css:
.progress_bar{
overflow: hidden;
height: 36upx;
background-color: #FFFFFF;
display: inline-flex;
width: 550upx;
border: 4upx solid color;
line-height: 1;
}
.progress_bar view {
width: 0;
height: 100%;
align-items: center;
display: flex;
justify-items: flex-end;
justify-content: space-around;
font-size: 20upx;
color: #ffffff;
transition: width 0.6s ease;
}
.progress_bar.active view {
animation: progress-stripes 2s linear infinite;
}
@keyframes progress-stripes {
from {
background-position: 72upx 0;
}

    to {  
        background-position: 0 0;  
    }  
}  
.progress_bar_con{  
    background-color: color;  
}  
    .round {  
    border-radius: 5000upx;  
     }

3***@qq.com (作者)

没这么复杂吧用的 uniapp 的progress

2019-12-03 16:47
3***@qq.com (作者)

回复 3***@qq.com: <progress class="tiao" percent="100" activeColor="white" active show-info="" stroke-width="8" backgroundColor="#999"/>

2019-12-03 16:49