vue 首屏添加加载动画 loading

效果为

 

<!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, minimum-scale=1.0, maximum-scale=1.0" />
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
  <meta name="referrer" content="no-referrer" />
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>爱心小叮当</title>
  <script src="vue-matomo/dist/vue-matomo.js"></script>
  <!-- From CDN -->
  <script src="https://unpkg.com/vue-matomo"></script>
  
  <script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js"></script>

</head>
<style type="text/css">
  #Loading {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
    z-index: 100;
    text-align: center;
  }

  .logo {
    font-size: 24px;
    margin-bottom: 10px;
    color: #4999ff;
  }

  .loading-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    width: 200px; /* 调整长条的宽度 */
    height: 4px;
    background-color: #ccc;
    overflow: hidden;
  }

  .loading-bar > div {
    width: 100%;
    height: 100%;
    background-color: #4999ff;
    animation-fill-mode: forwards;
    animation: loading-bar 2s linear infinite;
  }

  @keyframes loading-bar {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0%);
    }
  }

  .loading-text {
    color: #333;
  }
</style>
<style>
  body {
    /* 阻止页面的左右滑动 */
    touch-action: none;
    touch-action: pan-y;
  }
</style>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="Loading">
    <div class="logo">Logo</div>
    <div class="loading-bar">
      <div></div>
    </div>
    <p class="loading-text">加载中...</p>
  </div>

  <div id="app"></div>

  <!-- built files will be auto injected -->
</body>

</html>

　　vue项目直接在index.html上修改就可

posted @ 2023-06-26 15:51  秋水长天一色  阅读(644)  评论(0)    收藏  举报