angular中实现进度条

html代码如下:

  
{{data.dimeWeight}}

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

你可能感兴趣的:(angular中实现进度条)