Vue uses CSS encapsulation to load animation loading components

Time:2021-11-25

1、 Starting knowledge reserve:
1.transform: rotate(1turn)
transform: rotate(1turn);` Equivalent to ` transform: rotate (360DEG);
2.transform-origin
The transform origin attribute allows you to change the position of the transform element. It is used to set the base point of element motion, that is, the starting point

CSS code:

<style lang="less" scoped>
//Sets the size of the element component to the size of the parent element to which it is applied
.my_loading {
  position: absolute;
  top: 0%;
  z-index: 10;
  background-color: #13aa52;
  height: 100%;
  width: 100%;
}
.loading_box {
  //Used to center the rotation element
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  //Rotation type package
//Rotation type 1: single (leaf display)
  .shuye {
    position: absolute;
    top: 0%;
    animation: loading 1s infinite;// The name of the sport is loading
    -webkit-animation: loading 1s infinite;
    position: absolute;
    transform-origin: 50% 50px; // The element base point position starts at 50% and the size is 50px
  }
  //Rotation type 2: multiple (small dot display)
  .circle {
    position: absolute;
    top: 0%;
    //Set the general style of white dots
    li {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 4px;
      background-color: #ffffff;
    }
    //Set first delay 0.125
    li:nth-child(1){
      animation: loading 1s infinite 0.125s;// The first is the animation name, the second is the animation motion time, and the third is the permanent attribute, that is, the animation lasts forever. Setting the fourth parameter means to delay
      -webkit-animation: loading 1s infinite 0.125s ;
      position: absolute;
      transform-origin: 50% 50px; // The element base point position starts at 50% and the size is 50px
    }
      //Set 2nd delay 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; // The element base point position starts at 50% and the size is 50px
    }
        //Set 3rd delay 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; // The element base point position starts at 50% and the size is 50px
    }
            //Set the 4th delay 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; // The element base point position starts at 50% and the size is 50px
    }
  }
}
//Animation effect, rotate 360 degrees
@keyframes loading {
  to {
    transform: rotate(1turn);
  }
}
</style>

result:Vue uses CSS encapsulation to load animation loading components

HTML and JS code:

<template>
  <div v-if="isShowLoading" class="my_loading">
    <div class="loading_box">
      {{ num }}%
      <!--  Leaf loading -- >
      <svg v-if="type=='leaf'" class="icon leaf" aria-hidden="true">
        <use xlink:href="#icon-shuyec"></use>
      </svg>
      <!--  Small circle loading -- >
      <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, // controls whether the component is removed
    //Set default load to leaf type
    type:{
      default(){
        return 'leaf'
      }
    }
  },
  data() {
    return {
      num: 0,
    };
  },
  methods: {},
  mounted() {
    //Start timing and generate random numbers when components render ~ ~ ~, and clear the timer when components disappear
    let timer;
    if (this.isShowLoading == true) {
      if (this.isShowLoading == false) {
        clearInterval(timer);
      }
      timer = setInterval(() => {
        this.num = Math.floor(Math.random() * 100 + 1);
      }, 1000);
    }
  },
};
</script>

Incoming type = ‘Leaf’
effect:
Vue uses CSS encapsulation to load animation loading components
Incoming type = “circle”
effect:
Vue uses CSS encapsulation to load animation loading components