效果为
<!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上修改就可