一、起步常识储备：
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’
成果：