一个 vue 的 loading 小动画

Kapture 2020-05-09 at 15 27 27
<template>
  <div class="loading">
    <!-- 钩子的图片和白布 -->
    <div class="loading_pass" v-if="this.loading === 1">
      <img class="loading_pass-img" src="./img/gou.png"/>
      <div class="loading_pass-mu"></div>
    </div>
    <!-- 一直loading的动画 -->
    <div class="loading_ing" :class="loadEnd && 'loading_end'">
      <div></div><div></div><div></div><div></div>
    </div>
  </div>
</template>

<script>

export default {
  // 可选择 0 loading 1 load done
  props: {
    loading: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      loadEnd: false,
      timer: null
    }
  },
  watch: {
    loading: {
      immediate: true,
      handler () {
        if (this.loading === 1) {
          this.showPass()
        } else {
          this.loadEnd = false
        }
      }
    }
  },
  methods: {
    showPass () {
      this.timer = Object.freeze(
        setTimeout(() => {
          this.loadEnd = true
          clearTimeout(timer)
          timer = null
        }, 800)
      )
    }
  }
}
</script>

<style lang="scss" scoped>
$bgc: #fff;
$pass_w: 74px;
$pass_h: 50px;

.loading {
  width: 100%;
  height: 100%;
  position: relative;
  background: $bgc;
  &_ing {
    width: 100%;
    height: 100%;
    > div {
      display: block;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      border: 8px solid #ffc012;
      border-radius: 50%;
      animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      border-color: #ffc012 transparent transparent transparent;
    }
    & div:nth-child(1) {
      animation-delay: 0.45s;
    }
    & div:nth-child(2) {
      animation-delay: 0.3s;
    }
    & div:nth-child(3) {
      animation-delay: 0.15s;
    }
  }
  &_end {
    > div {
      border-color: #ffc012 !important;
      transition: border-color 0.5s;
    }
  }
  &_pass {
    position: absolute;
    width: $pass_w;
    height: $pass_h;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    &-img {
      width: 100%;
      height: 100%;
    }
    &-mu {
      position: absolute;
      width: 100%;
      height: 100%;
      animation: pass-show 1s 0.8s forwards;
      top: 0;
      left:0;
      background:$bgc;
    }
  }
  &_chargend {
    > div {
      border-color: #ffc012 !important;
      transition: border-color 0.5s;
    }
  }
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pass-show {
  0%   { left: 0; }
  100% { left:100%; }
}
</style>
chiyan-lin / code-snippet

一个 vue 的 loading 小动画 #2
