html代码如下：
<div class="out-graually-div">
<div class="inside-graually-div" [ngStyle]="{'width':data.dimeWeight*2+'px'}"></div>
</div>
<div class="weight-number">{{data.dimeWeight}}</div>
css代码如下：
.out-graually-div {
height: 10px;
width: 200px;
//border: 1px solid #F9F9F9;
border-radius: 6px;
float: left;
background-color: #F9F9F9;
}
.inside-graually-div {
display: block;
height: 10px;
background: linear-gradient(90deg, rgba(255, 178, 72, 1) 0%, rgba(245, 108, 108, 1) 100%);
border-radius: 6px;
position: relative;
float: left
}
.weight-number {
float: left;
line-height: 10px;
margin-left: 10px
}
效果图如下：
进度条.png
