H5水波纹动画 及加载样式countTo插件获取当前值的使用

圆环散点动画

      <div class="box">
        <div class="yuan"></div>
      </div>
 .yuan {
    position: absolute;
    z-index: 1;
    top: 3.8267rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    width: 4.5867rem;
    height: 4.5867rem;
    border: 0.1333rem dashed #9db5f8;
    animation: yuanhuan 7s linear infinite;
  }
    @keyframes yuanhuan {
    0% {
      transform: translate(-50%, -60%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -60%) rotate(360deg);
    }
  }
 

水波纹动画

     <div class="quan">
        <div class="shui"></div>
      </div>
<style>
  .quan {
    position: relative;
    top: 1.52rem;
    left: 50%;
    width: 3.68rem;
    height: 3.68rem;
    border-radius: 50%;
  }
  .shui {
    position: absolute;
    width: 100%;
    transform: translateX(-50%);
    height: 100%;
    /* background-color: rgb(23, 106, 201); */
    background-color: #80b1d3;
    border-radius: 50%;
    overflow: hidden;
  }
  .shui::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 150%;
    height: 150%;
    border-radius: 40%;
    /* background-color: rgb(240, 228, 228); */
    background-color: #33acc3;
    animation: shi 5s linear infinite;
  }
  @keyframes shi {
    0% {
      transform: translate(-50%, -65%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -65%) rotate(360deg);
    }
  }
  .shui::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 150%;
    height: 150%;
    border-radius: 42%;
    /* background-color: rgb(240, 228, 228,0.2); */
    background-color: #edb2dc;
    animation: xu 7s linear infinite;
  }
  @keyframes xu {
    0% {
      transform: translate(-50%, -60%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -60%) rotate(360deg);
    }
  }
</style>

H5用到了Vant组件库 和countTo插件(数字跳动)
yarn安装 countTo插件
yarn add vue-count-to

引入组件
import countTo from ‘vue-count-to’;

然后注册
components: { countTo },

    <div class="progress">
      <p class="jindu">{{ progressVal }}%</p>
      <van-progress
        :percentage="progressVal"
        stroke-width="0.27rem"
        color="#294fde"
        :show-pivot="false"
        track-color="#d8d8d8"
      />
      <p class="pipei">正在为您匹配合适商家</p>
    </div>
    <!-- 隐藏CountTo插件 只需要获取滚动值的数值 -->
    <countTo
      ref="score"
      style="display:none"
      class="qian"
      :start-val="startVal"
      :end-val="endVal"
      :duration="8000"
    />

由于 countTo 并没有 API 能够直接监听到它这个数字的变化 . 所以我们只能够手动去监听，利用 defineProperty 来进行数据的劫持。

<script>
import countTo from 'vue-count-to'
export default {
  name: 'ExamineLoading',
  components: {
    countTo
  },

  data() {
    return {
      // countTo插件开始值和结束值
      startVal: 0,
      endVal: 100,
      // 定义临时值 接收Object.defineProperty
      tempVal: '',
      progressVal: ''// 进度值
    }
  },
  watch: {
    tempVal(val) {
        this.progressVal = val// 侦听零食值的变化 赋值给进度值
    }
  },

mounted() {
    const m = this.$refs.score // countTo
    // 监听 displayValue / 数字滚动插件的变化
      const that = this
      Object.defineProperty(m, 'displayValue', {
      get: function() {
        return m.displayValue
     },
      set: function(v) { // 数据更新后会返回更新后的值
      that.tempVal = v // 赋值给临时值 用于进度条数字变化显示
   }
  })
 },
}
</script>

    <div class="verify">
      <p>
        <span>申请信息 已完成 </span>
        <img v-if="showimg1" src="./img/check.png" alt="">
        <van-loading v-if="!showimg1" type="spinner" size=" 0.5333rem" />
      </p>
      <p>
        <span>借款资料 已完成 </span>
        <img v-if="showimg2" src="./img/check.png" alt="">
        <van-loading v-if="!showimg2" type="spinner" size=" 0.5333rem" />
      </p>
      <p>
        <span>风险评估 已完成 </span>
        <img v-if="showimg3" src="./img/check.png" alt="">
        <van-loading v-if="!showimg3" type="spinner" size=" 0.5333rem" />
      </p>
    </div>

    computed: {
    //控制加载勾勾图片显示
        showimg1() {
           return this.progressVal >= 50
        },
        showimg2() {
           return this.progressVal >= 80
        },
        showimg3() {
           return this.progressVal >= 99
        }
    },
  watch: {
  	//监听进度值变化
    progressVal(val, old) {
       val === '100' ? this.$router.replace('/') : ''
    }
  },

.verify{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: .2667rem ;
    // padding-left: .4667rem;
    p{
        display: flex;
        align-items: center;
        width: 10rem;
        justify-content: center;
        font-size: .3733rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        line-height: 0.8rem;
        span{
             margin-right: .2667rem ;
        }
        img{
            width: .5333rem;
            height: .5333rem;
            margin-right: .2667rem ;
        }
    }
}