Vue handwriting loading animation project

When the page is not responding, displaying the loading animation is a user-friendly performance, so as not to cause a white screen. The animation will be removed when the response content is rendered to the page.

First put the loading effect picture

Principle: pseudo-class + animation. Below is a step-by-step diagram, which is posted to help you understand. The essence of loading animation is to set a square with fixed width and height, border-radius: 50%; to make it circular, then give the div a 3px border and set it transparent, and then set the upper border to white separately, use the ::before and ::after pseudo-class absolute to position and make the same settings. The difference is to increase the gap left in turn, and the animation execution time becomes longer and the delay is set, so that the circle can rotate at different speeds.

Full code:

loading.vue in the components folder

<template>
  <div id="loader_wrapper">
    <div id="loader"></div>
    <div class="load_title">Loading, please wait......</div>
  </div>
</template>
<script>
  export default{
      name:"loading",
  }
</script>
<style scoped>
#loader_wrapper{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: rgba(0, 0, 0,.8);
  background-size: 100% 100%;
}
#loader{
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  /* background: red; */
  margin: -150px 0 0 -150px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #fff;
  -webkit-animation: spin 5s linear infinite;
  -ms-animation: spin 5s linear infinite;
  -moz-animation: spin 5s linear infinite;
  -o-animation : spin 5s linear infinite;
  animation:spin 5s linear infinite;
  z-index: 1001;
}
#loader:before{
  content:"";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  /* background: green; */
  border: 3px solid transparent;
  border-top-color: #fff;
   -webkit-animation: spin 8s linear infinite;
  -ms-animation: spin 8s linear infinite;
  -moz-animation: spin 8s linear infinite;
  -o-animation : spin 8s linear infinite;
  animation:spin 8s linear infinite;
}
#loader:after{
  content:"";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  /* background: yellow; */
  border: 3px solid transparent;
  border-top-color: #fff;
   -webkit-animation: spin 8s linear 1s infinite;
  -ms-animation: spin 8s linear 1s infinite;
  -moz-animation: spin 8s linear 1s infinite;
  -o-animation : spin 8s linear 1s infinite;
  animation:spin 8s linear 1s infinite;
}
@-webkit-keyframes spin {
  0%{
    -webkit-transform: rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
    -ms-transform:rotate(360deg);
    transform: rotate(360deg);
  }
}
 
@keyframes spin{
  0%{
    -webkit-transform: rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
    -ms-transform:rotate(360deg);
    transform: rotate(360deg);
  }
}
#loader_wrapper .load_title{
  font-family: "Open Sans";
  color:#fff;
  font-size: .3rem;
  width: 100%;
  text-align: center;
  z-index: 9999;
  position: absolute;
  top: 70%;
  opacity: 1;
  line-height: .3rem;
}
</style>

Introduce and register loading in the cs.vue page

cs.vue

<template>
  <div class="main">
    <loading v-if="!initFlag"></loading>
    111
  </div>
</template>
 
<script>
  import loading from "../components/loading"
  export default {
    name:"tranin",
    data () {
      return {
        initFlag:false, // Request to initialize global data false means the request failed}
      
    },
    components:{
      loading,
    }
  }
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Detailed explanation of Vue transition effects and animation transition usage examples
Detailed explanation of the application of transition animation effects in Vue
Vue learning notes advanced chapter single element transition
Vue implements carousel animation
In-depth understanding of Vue transition and animation

<<: HTML form tag tutorial (2):

>>: How to install Jenkins using Docker