vue首次加载页面实现动画加载提示

布满荆棘的人生 2022-09-13 06:28 330阅读 0赞

话不多说，咱们直接上代码！！！  
下面图片是实现效果：

> **Tips**：只有app第一次初始化会加载，路由到其他页面并不会加载,路由切换非常快，不需要这种全屏的加载中状态，路由切换的状态,小伙伴可以试一下：vue-progress

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZSQIOeSnA_size_20_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <title>VUE加载loading动画</title>
    </head>
    <body>
      <noscript>
        <strong>请将当前浏览器至更高版本！</strong>
      </noscript>
      <div id="app">
        <div id="Loading">
          <div class="loader-inner ball-beat">
            <div></div>
            <div></div>
            <div></div>
          </div>
           <div>正在拼命加载...</div>
        </div>
      </div>
    
      <style type="text/css">
        #Loading { 
          top: 50%;
          left: 50%;
          position: absolute;
          -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
          z-index: 100;
        }
    
        @-webkit-keyframes ball-beat { 
          50% { 
            opacity: 0.2;
            -webkit-transform: scale(0.75);
            transform: scale(0.75);
          }
    
          100% { 
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
          }
        }
    
        @keyframes ball-beat { 
          50% { 
            opacity: 0.2;
            -webkit-transform: scale(0.75);
            transform: scale(0.75);
          }
    
          100% { 
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
          }
        }
        
        .ball-beat>div { 
          background-color: #4999ff;
          width: 10px;
          height: 10px;
          border-radius: 100% !important;
          margin: 2px;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
          display: inline-block;
          -webkit-animation: ball-beat 0.7s 0s infinite linear;
          animation: ball-beat 0.7s 0s infinite linear;
        }
        .ball-beat>div:nth-child(2n-1) { 
          -webkit-animation-delay: 0.35s !important;
          animation-delay: 0.35s !important;
        }
      </style>
      
    </body>
    </html>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZSQIOeSnA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/20552ce4b036415db1202e14a1060d14.png