angular中实现进度条

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