39 进度条使用

<template>
  <div class="plLoading">
    <div class="plLoadingContent">
      <div class="plLoadingLogo">
        <div style="padding-right:50px">
          <img src="/static/xxxx.jpg" style="height:80px;80px;border-radius: 50%;">
        </div>
        <div>
          <h1 style="color:white">亿信互联智能划控平台</h1>
        </div>
      </div>
      <div class="plLoadingCon">
        <el-progress :text-inside="true" :stroke-width="15" :percentage="count" status="success" />
      </div>
      <div ref="plLoadingNum" class="plLoadingNum">{{ count }}/100条</div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      show: true,
      count: '',
      timer: null
    }
  },
  created() {
    this.getCode()
  },
  methods: {
    getCode() {
      const TIME_COUNT = 100
      if (!this.timer) {
        this.count = 0
        this.show = false
        this.timer = setInterval(() => {
          if (this.count >= 0 && this.count !== TIME_COUNT) {
            this.count = this.count + 10
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
            const self = this
            this.$notify({
              title: '成功',
              duration: 1000,
              message: '智能划控成功!',
              type: 'success'
            })
            setInterval(function() {
              self.$emit('fun', 'success')
            }, 1000)
          }
        }, 1000)
      }
    }
  }
}
</script>

<style>
  .plLoading{
     100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    background-color: #00101d;
  }
  .plLoadingContent{
     500px;
    height: 220px;
    position: absolute;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    margin-top: -110px;
    margin-left: -250px;
  }
  .plLoadingLogo{
    display: flex;
    align-items: center;
    height: 60px;
  }
  .plLoadingCon{
     500px;
    height: 16px;
    margin-top: 100px;
    border-radius: 8px;
    background-color: #222222;
  }
  .plLoadingShow{
    transition: width .5s;
    height: 16px;
    border-radius: 8px;
    background-color: #0062b2;
    position: absolute;

  }
  .plLoCir{
    transition: left .5s;
    position: absolute;
     16px;
    height: 16px;
    border-radius: 8px;
    background-color: #0062b2;
    box-shadow: 0 0 20px #008cff;
  }
  .plLoadingNum{
    font-size: 14px;
    color: #0062b2;
    margin-top: 20px;
  }
  .displayNone{
    display: none;
  }
</style>

　　效果