vue使用css封装加载动画loading组件

一、起步知识储备：
1.transform: rotate(1turn)
transform: rotate(1turn)；`等价于 `transform: rotate(360deg);
2.transform-origin
transform-Origin属性允许您更改转换元素的位置。就是用来设置元素运动的基点，即起点

css代码：

<style lang="less" scoped>
//设置元素组件大小为应用它的父元素大小
.my_loading {
  position: absolute;
  top: 0%;
  z-index: 10;
  background-color: #13aa52;
  height: 100%;
  width: 100%;
}
.loading_box {
  //用于设置旋转元素居中
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  //旋转类型封装
// 旋转类型1：单个（树叶展示）
  .shuye {
    position: absolute;
    top: 0%;
    animation: loading 1s infinite;//运动名叫loading
    -webkit-animation: loading 1s infinite;
    position: absolute;
    transform-origin: 50% 50px; //元素基点位置为50%开始，大小50px
  }
  //旋转类型2：多个（小圆点展示）
  .circle {
    position: absolute;
    top: 0%;
    //设置白色小点总样式
    li {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 4px;
      background-color: #ffffff;
    }
    //设置第一个延迟0.125
    li:nth-child(1){
      animation: loading 1s infinite 0.125s;//第一个为动画名，第二个为动画运动时间，第三个为永久属性，即动画持续永久,设置第四个参数的意思是用于延迟
      -webkit-animation: loading 1s infinite 0.125s ;
      position: absolute;
      transform-origin: 50% 50px; //元素基点位置为50%开始，大小50px
    }
      //设置第2个延迟0.25
    li:nth-child(2){
      animation: loading 1s infinite  0.25s;
      -webkit-animation: loading 1s infinite  0.25s ;
      position: absolute;
      transform-origin: 50% 50px; //元素基点位置为50%开始，大小50px
    }
        //设置第3个延迟0.375
    li:nth-child(3){
      animation: loading 1s infinite  0.375s;
      -webkit-animation: loading 1s infinite  0.375s ;
      position: absolute;
      transform-origin: 50% 50px; //元素基点位置为50%开始，大小50px
    }
            //设置第4个延迟0.5
    li:nth-child(4){
      animation: loading 1s infinite  0.5s;
      -webkit-animation: loading 1s infinite  0.5s ;
      position: absolute;
      transform-origin: 50% 50px; //元素基点位置为50%开始，大小50px
    }
  }
}
// 动画效果，旋转360度
@keyframes loading {
  to {
    transform: rotate(1turn);
  }
}
</style>

结果：

HTML及JS代码：

<template>
  <div v-if="isShowLoading" class="my_loading">
    <div class="loading_box">
      {{ num }}%
      <!-- 树叶加载 -->
      <svg v-if="type=='leaf'" class="icon leaf" aria-hidden="true">
        <use xlink:href="#icon-shuyec"></use>
      </svg>
      <!-- 小圆圈加载 -->
      <div v-if="type=='circle'" class="circle">
        <li></li>
        <li></li>
        <li></li>
        <li></li> 
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "loading",
  props: {
    isShowLoading: false,//控制组件是否移除
    // 设置默认加载为树叶类型
    type:{
      default(){
        return 'leaf'
      }
    }
  },
  data() {
    return {
      num: 0,
    };
  },
  methods: {},
  mounted() {
    //组件渲染时开始计时并生成随机数字~~~~，组件消失时清除计时器
    let timer;
    if (this.isShowLoading == true) {
      if (this.isShowLoading == false) {
        clearInterval(timer);
      }
      timer = setInterval(() => {
        this.num = Math.floor(Math.random() * 100 + 1);
      }, 1000);
    }
  },
};
</script>

传入type=‘leaf’
效果：

传入type=‘circle’
效果：