前端使用css动画绘制简易的进度条，数据多条的时候可以切换

文章目录

一、效果图
二、使用步骤
- 1.公共的进度条组件
- 2.使用
总结

一、效果图

在这里插入图片描述

二、使用步骤

1.公共的进度条组件

我这里命名的progressBar.vue，你们使用的时候直接复制粘贴到自己的项目里面即可。
文件中代码如下（示例）：

<template>
  <div>
    <div style="width: 100%;height: 100%">
      <div v-for="(item, index) in showList" :key="index + item.value" class="item">
        <div :class="index < 3 && page == 1 ? ('itemIcon' + (index + 1)) : 'itemIcon'">{{ index + 1 }}</div>
        <div class="itemTitle">{{ item.name }}</div>
        <div class="itemValue">{{ item.value }}{{unit}}</div>
        <div class="itemBar">
          <div :class="index < 2 && page == 1 ? ('innerBar' + (index + 1)) : 'innerBar'" :style="'width:' + (item.value / maxValue * 100).toFixed(2) + '%;'"></div>
        </div>
      </div>
      <div class="pager-content">
        <div v-for="pageNum in totalPage" :class="pageNum == page ? 'selected' : ''" @click="page = pageNum"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "progressBar",
  props: {
    dataList:{
      type: Array,
      default:[
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
      ],
    },
    unit:{
      type: String,
      default:'%',
    }
  },
  data () {
    return {
      page: 1,
      limit: 7,
    }
  },
  computed: {
    showList () {
      return this.dataList.slice(((this.page - 1) * this.limit), (this.page * this.limit))
    },
    totalPage () {
      const length = this.dataList.length
      let value = Math.floor(length / this.limit)
      if (length % this.limit !== 0) value++
      return value
    },
    maxValue(){
      let maxNum = 0
      let list = this.dataList.map(i => i.value)
      maxNum = Math.max(...list)
      return maxNum
    }
  },
}
</script>

<style scoped lang="less">

.item{
    position: relative;
    margin-top: 30px;
    width: 100%;
    height: 45px;
    .itemIcon1{
      position: absolute;
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAsCAYAAAATmipGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI0OEQ0MjU1M0NGMjExRUZBNTA0RTNGOTIyNzIxOUE3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI0OEQ0MjU2M0NGMjExRUZBNTA0RTNGOTIyNzIxOUE3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjQ4RDQyNTMzQ0YyMTFFRkE1MDRFM0Y5MjI3MjE5QTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjQ4RDQyNTQzQ0YyMTFFRkE1MDRFM0Y5MjI3MjE5QTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz75mu2sAAAGQUlEQVR42rSZTagc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");
      width: 42px;
      height: 44px;
      font-family: DINPro-Bold;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 44px;
      letter-spacing: 0px;
      color: #ffffff;
      text-align: center;
    }
    .itemIcon2{
      position: absolute;
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAsCAYAAAATmipGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI0MjlBNzgxM0NGMjExRUY5MTUwRUQzNDk5OUY3QjQyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI0MjlBNzgyM0NGMjExRUY5MTUwRUQzNDk5OUY3QjQyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjQyOUE3N0YzQ0YyMTFFRjkxNTBFRDM0OTk5RjdCNDIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjQyOUE3ODAzQ0YyMTFFRjkxNTBFRDM0OTk5RjdCNDIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz70rNkpAAAHXElEQVR42rSZWYwU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");
      width: 42px;
      height: 44px;
      font-family: DINPro-Bold;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 44px;
      letter-spacing: 0px;
      color: #ffffff;
      text-align: center;
    }
    .itemIcon3{
      position: absolute;
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAsCAYAAAATmipGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIzQzIxQjQwM0NGMjExRUY4RDFBODQ5MENFM0NBN0I3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIzQzIxQjQxM0NGMjExRUY4RDFBODQ5MENFM0NBN0I3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjNDMjFCM0UzQ0YyMTFFRjhEMUE4NDkwQ0UzQ0E3QjciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjNDMjFCM0YzQ0YyMTFFRjhEMUE4NDkwQ0UzQ0E3QjciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5IjV3sAAAHS0lEQVR42rSZWYgcRRjH/9XXzrFm142R7G4MWU1MEIOCBxFEvJKIiuCDJ/oQFKMivogg5kF80gcFFXU1oqggaFCCtxIR8UBDCGi8z6hJXHeTmM1mZne6p7vKr2u6x5qaqtkrNnz09HR196+/+s5qtuQagXlubBZj5/wwb55wtr0OJuYL7M0RMgdylGOmncthePZblVkDe3PUYg7oZr8dDRoKFLfIrGC9WQIyBco1SH4OCmRiET4bc/DmAOhk16niK7D5+FxzsSb17B6JMmZac/BmaIcmwCADzPcStrgOpzkLsLD6Kj7MYHK4KNu72T7WtNvRfr0ZaFGdWl+B61Ik8FdhoHABbnd6cEF67YI78WX4OR4Jd+DnDDLMxFOgdWChQDMVlilxVHeWHFKdXhWwkAppr6d4Oa51B3A1XVHQXjzhB/De1DY8l+zBaAY6pUCbgFVna2pZB9UhfQtgMZXCpVjrrcDNzMeiju7IUY1/x4u1t7FVhKhmsLVMcuCokznkoGoMVKc5ULWXAwZnYbV/Bm5lJayeTQAmyD3x99gcfohP6HDSABwqTqc6mtBBdcgmHEnZXYL+4ELc4vRh/SxTZyvwBL6ItmM4/lba76QGHSmm0IRVQR3No3PIblZGb9cluN7pxw00qoyjsQnE/CBejz7AZj4m7beaAauwTZvNQdXw0wLpr8XF7hDuIh2fgP9jS/APH8FT0Tt4hdCOaLBNB/O00KR6euCdhzOd5XhEwJBHmprJ7J0nEJwG8Wyg44CRwMlyAGO2iN3HBnCvvx7V+lt4LQN0lZQsR3UC9QVHgSedpi8DjGmW6jWIiHyBxxmoBxaQH/oFeoonj62w6a1iOZO56bla7SC8DqHJo4s9kUwHSQqoVbG2HGLTuQuxrK8oT++vRLj3kzFsq8YQhTLBsoZ2LbD0LFdJxXqB06peLWW66cWpRq1ST8CnpjAQVfDoRf0SshrWpSzqDui/xRgIJ8Anq42xibDfK7YWNwzKgSnouzT1bm527ZI+lINHddx6cgmlwJWA1z32Jk6653lUaxH952Hj8i4JmkQR7PcijfLmTJpKRmOubwpdzOxTn/qkoCnj2DUa4oXPdmPP6AFs//tImjixe+QgTh3qx2DZQVKrgRViMJeIXMfsU1waBbPFZ88EqICiIyhnFIl9vLRnEuKHQxQJx+mOZKP1Oob6F8ph+/6pkJORs8XcHjkaYUoFZdNptJWF3jJ3YjMozZRTgPCJoMjk8aazB3HT+StQLvgYG6/g7vd/Alu4lOBT7RuMLXcMPo8KP9WoNTwJAhOpFweNu3CHgInEYRLyv+BAWhcUU0n7zULOXLhIA7VtTqdukSKQ6Oj1qRAAJ0jpEAR0/2cjuPyBtzB2qILje7vx9BWnkPmIzh6fSKWIThW+Y2ltG5LZqFnSqaQ4GkZY0xViTbGOZQ7FVLLHz/cdxle//CVvtmLxAhpLFNLxhP1+3MJgmXp1AAUg8t9OzkSxEdEUNl1Ywjkn9mHscB9W3kcFEWWo5YMNZ6pM1aU2G1WmvX9zREuHKqZrRVo6xzRUWkHT1yCNgjS6ZUeFQIdwfE8Bex+8TN6mXAjksC1f7CWT6GpoLOmYjbmh4WsCewZ1N7vHFIXzTs7E0viHZ7+fQO+Wb3DbuhPJLkvy9NihKobf/RbP/kiFUM+xMoyBbNgWovh/jWBi6EybGm2DzEE7x9HM6ylEPbTzIB7+9CMyh8lGHeBRpVgk+ywfR+5cJtAuGRlsXk+XxIa+yWijOWyzxXWq2Cvq2EeKGLSGJ4JkQY+EYC4F+yRqnHcDiKCbKttjqPQpN+qfhJnzjsBhVsVuvQZVTcCz2Gc6OCrsw2/Bflw1sQob4m7cSA8ptGbbFJTsz3cprRCY391S5sGjc6lmnaxyky/Xmo+8SWwt/4phfwIjhsq+rV1uq0WVhi5tPUrhsVhaWYqNSRFrW/Kx4M3CWU55Fmeoam6UdM3CuTUlUSTbWRrB4yTfKW1I3jfVdWC9uWup8PX2OAWuDuD0ycW4g3qDlXNar0zwV/EAho/5Ax8bGrvQ0DYbu1CTZrvaOlKG0vgQ1oe92ED2u2iGzVw1OIKXe3/DFieWvZHaKte0xQi9rxeeIW1xS2zN7bdO/0T0wDfiLnw8vgw31ku4kuADG6JXw7aeP/FMUMHfGZS+WmJskW0rJSbN6trVFyXkfqoXSyYGyH4DnN9ihzF2de/Hk92j0g7zqa11WM4xLZgZQWeykqcDB/mK3vggzpzsxZ00ekFhAk/0/YFteQRRFsrU5Zu6BbAthTLLx4aZrI36msgYRDbrJT58L5TTyxWN1TVJLCnTWEHZ6lGxdzWw5Ou2rOVoq8i5tvIW16WU6nhh09bVuBxrU6wvM4KeKbJntmtuhp9vbOv3rmLHjtbV6rC6BtuWFo/GxwY9KjBNy/E0HxuEzZuP5scG23cjFZYZHFFYCuFZAc7nO5NpnZ0ZzETM8OPY//rlzgQ8HeC8tn8FGABV5R4U7Uz3YAAAAABJRU5ErkJggg==");
      width: 42px;
      height: 44px;
      font-family: DINPro-Bold;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 44px;
      letter-spacing: 0px;
      color: #ffffff;
      text-align: center;
    }
    .itemIcon{
      position: absolute;
      width: 42px;
      height: 44px;
      font-family: DINPro-Bold;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 44px;
      letter-spacing: 0px;
      color: #ffffff;
      text-align: center;
      visibility: hidden;
    }
    .itemTitle{
      position: absolute;
      left: 50px;
      font-family: SourceHanSansCN-Regular;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      //line-height: 47px;
      letter-spacing: 0px;
      color: #7fbfff;
    }
    .itemValue{
      position: absolute;
      right: 20px;
      font-family: SourceHanSansCN-Regular;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      //line-height: 47px;
      letter-spacing: 0px;
      color: #ffffff;
    }
    .itemBar{
      position: absolute;
      left: 50px;
      top: 25px;
      width: calc(100% - 70px);
      height: 20px;
      background-color: #031632;
      border-radius: 9px;
      border: solid 1px #0234a7;
      .innerBar1{
        position: relative;
        margin-left: 2px;
        margin-top: 2px;
        height: 14px;
        background-image: linear-gradient(180deg,
        #ffe62c 0%,
        #ffa202 100%),
        linear-gradient(
            #eeeeee,
            #eeeeee);
        background-blend-mode: normal,
        normal;
        border-radius: 7px;
        border: solid 1px #03297f;
        animation: lToR 2s;
        -moz-animation: lToR 2s;
        -webkit-animation: lToR 2s;
        -o-animation: lToR 2s;
      }
      .innerBar2{
        position: relative;
        margin-left: 2px;
        margin-top: 2px;
        height: 14px;
        background-image: linear-gradient(180deg,
        #2be9b6 0%,
        #049b68 100%),
        linear-gradient(
            #eeeeee,
            #eeeeee);
        background-blend-mode: normal,
        normal;
        border-radius: 7px;
        border: solid 1px #03297f;
        animation: lToR 2s;
        -moz-animation: lToR 2s;
        -webkit-animation: lToR 2s;
        -o-animation: lToR 2s;
      }
      .innerBar{
        position: relative;
        margin-left: 2px;
        margin-top: 2px;
        height: 14px;
        background-image: linear-gradient(180deg,
        #2cd0ff 0%,
        #0084ff 100%),
        linear-gradient(
            #eeeeee,
            #eeeeee);
        background-blend-mode: normal,
        normal;
        border-radius: 7px;
        border: solid 1px #03297f;
        animation: lToR 2s;
        -moz-animation: lToR 2s;
        -webkit-animation: lToR 2s;
        -o-animation: lToR 2s;
      }
    }
  }

.pager-content{
  position: absolute;
  bottom: 30px;
  height: 20px;
  display: flex;
  justify-content: space-evenly;
  flex-flow: row nowrap;
  background: rgba(0,0,0,0.3);
  padding-top: 4px;
  border-radius: 10px;
  width: 85%;
  width: 250px;
  left: calc(50% - 125px);
}
.pager-content>div{
  width: 12px;
  height: 12px;
  cursor: pointer;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkI3N0Q2NDMzMzczMTFFQUJFMEZGOTQxOTg0MkIyQzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkI3N0Q2NDQzMzczMTFFQUJFMEZGOTQxOTg0MkIyQzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQjc3RDY0MTMzNzMxMUVBQkUwRkY5NDE5ODQyQjJDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQjc3RDY0MjMzNzMxMUVBQkUwRkY5NDE5ODQyQjJDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrzYFR4AAACeSURBVHjaYhR1Wc8ABWxAnAHEkUCsAxW7AsTLgXgGEP8CCTBCNUgD8RYgNmDADi4AsQ8QP2WCmoxPMQNUbisQs4M0pBNQDAP6QJwG0hDFQDyIAmkwIkGDIRMDaeA3SMM5EjRcYYKGM7FgOUjDTCC+SITiSyC1IA0/gdgbGjm4AMhAL5BamKefArE5EBcA8Rkg/grFZ6BiZlA1DAABBgA8Ih7BPlxE7QAAAABJRU5ErkJggg==") no-repeat center center;
}
.pager-content .selected{
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkMwMTk3QjEzMzczMTFFQTk5RjVGQzdGRkQ3Q0JBODkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkMwMTk3QjIzMzczMTFFQTk5RjVGQzdGRkQ3Q0JBODkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQzAxOTdBRjMzNzMxMUVBOTlGNUZDN0ZGRDdDQkE4OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQzAxOTdCMDMzNzMxMUVBOTlGNUZDN0ZGRDdDQkE4OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpAUD7AAAAIvSURBVHjalFRBTxNREJ63+3YLK1GQGhRcjBghES692sRE0j9gvHgx+lP8I148e/NkQoKXeiAxXDTxgiYWgYS1baDWttvu+s3ut1oJiL7ky7ydN/PtzLyZZ+YepnJiuYAH+ISlfggMiBgYjTvZsb1DxwCYBmYpA553gTbwjbJL0mScSEkmgEvAArAE3AKuk0zovAvsAJ+APep6SlYQ+SRRggoSq168J7XlipRXFkUuGDCA4sO2RF82ZSONpQ67beAz0FQyy5oEjKSSzMqD4Ims374psgr6ZVRrBvHeWBG5siTlrYo8+vhc5tIoC6DPiGKHhZ3RaFJE0n0s6yUkVEIUUyYnCW0us+8QET6V+6kvVWagvl5R4Mtak0FVaqN50OMi+0AHaKGUjWEuO9Qn11Dlu1JjHdXXtyTSgobxmpQ1XnWIcLm7w7yAGonq9Fv1ulfb0hsJ6ZsR2eLKRwu54zH+vs8uaSd5mn2Sq17PZT47LtrDWjljHcKhl+bSM3m6GklGgmWSP+0tOzZrNvcr2nXx96E6HZ/xI+fgV2+p79Bhd6qi4b2XSP5x0bZB30FBpE2147+VDXf/fBK1UVt2ebMg0gFsadubgdSDF7Lp7v2dRG3UlqOiEcXu1J1nOv4pa9UzP6TtvZMjGF5NJ3EjmEAzyglKdYkmX8orpyOvOSKa2pESGT4jxdBO82KLoQ1PDG3jvKFNqGhyflocyNOekSbl99OekXGymEaH//Ow/RRgAFR62RXAIZxlAAAAAElFTkSuQmCC") no-repeat center center !important;
}
@keyframes lToR
{
  from {width: 0px;}
}
@-moz-keyframes lToR /* Firefox */
{
  from {width: 0px;}
}

@-webkit-keyframes lToR /* Safari and Chrome */
{
  from {width: 0px;}
}

@-o-keyframes lToR /* Opera */
{
  from {width: 0px;}
}
</style>

2.使用

在另外一个文件中要使用进度条组件，代码如下（示例）：

<template>
  <div class="part3_2">
    <progressBar class="part_content" :dataList="dataList" :unit="'%'"></progressBar>
  </div>
</template>

<script>
import progressBar from "../../../components/progressBar.vue";
export default {
  name: 'part3_2', // vue名称
  components:{progressBar},
  data () {
    return {
      dataList: [],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    //初始值
    async init(){
      this.dataList = [
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), },
        { name: '旅游行业', value: (Math.random() * 100).toFixed(1), }
      ]
      this.dataList.sort((a,b) => {
        return b.value - a.value
      })
    },
  }
}

</script>

<style scoped lang="less">
.part3_2{
  position: absolute;
  top: 230px;
  left: 60px;
  width: 31%;
  height: calc(100% - 250px);
  .part_content {
    position: absolute;
    top: 30px;
    width: 100%;
    height: calc(100% - 30px);
    overflow: auto;
  }
}
</style>