在頁面沒有響應時，展示載入動畫是一種對使用者友好的表現，不至於白屏，等響應內容渲染到頁面時再移除動畫

先放loading效果圖

原理：偽類+動畫，下面是步驟圖，貼上助於理解，載入動畫本質是設定一個定寬定高的正方形，border-radius: 50%;使其成為圓形，再給該div3px的邊框並設為透明，然後在單獨設定上邊框為白色，用::before，::after偽類absolute定位並進行同樣設定，不同之處是依次增大留出的間隙，以及動畫執行時間變長和設定延遲，這樣就能形成圓http://www.cppcns.com圈不同快慢的旋轉

完整程式碼：

components資料夾下loading.

<template>
  <div id="loader_wrapper">
    <div id="loader"></div>
    <div class="load_title">正在載入，請稍等......</div>
  </div>
</template>
<script>
  export default{
      name:"loading",}
</script>
<style scoped>
#loader_wrapper{
  position: fixed;
  thttp://www.cppcns.com
 
op: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: rgba(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;
  anLKulaNdji
 
imation: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>

在cs.vue頁面中引入並註冊loading

cs.vue

<http://www.cppcns.com;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,//初始化全域性資料的請求 false表示請求失敗
 
      }
      
    },components:{
      loading,}
  }
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。