关于前端: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’
成果：