找到index.html 只需把下列代码style样式和
<div class="sampleContainer">
复制到里边即可
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <style> .sampleContainer { position: fixed; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); 75px; height: 100px } .loader { position: relative; 44px; height: 8px; margin: 12px auto } .dot { display: inline-block; 8px; height: 8px; border-radius: 4px; background: #ccc; position: absolute } .dot_1 { animation: animateDot1 1.5s linear infinite; left: 12px; background: #e579b8 } .dot_2 { animation: animateDot2 1.5s linear infinite; animation-delay: .5s; left: 24px } .dot_3 { animation: animateDot3 1.5s linear infinite; left: 12px } .dot_4 { animation: animateDot4 1.5s linear infinite; animation-delay: .5s; left: 24px } @keyframes animateDot1 { 0% { transform: rotate(0) translateX(-12px) } 25% { transform: rotate(180deg) translateX(-12px) } 75% { transform: rotate(180deg) translateX(-12px) } 100% { transform: rotate(360deg) translateX(-12px) } } @keyframes animateDot2 { 0% { transform: rotate(0) translateX(-12px) } 25% { transform: rotate(-180deg) translateX(-12px) } 75% { transform: rotate(-180deg) translateX(-12px) } 100% { transform: rotate(-360deg) translateX(-12px) } } @keyframes animateDot3 { 0% { transform: rotate(0) translateX(12px) } 25% { transform: rotate(180deg) translateX(12px) } 75% { transform: rotate(180deg) translateX(12px) } 100% { transform: rotate(360deg) translateX(12px) } } @keyframes animateDot4 { 0% { transform: rotate(0) translateX(12px) } 25% { transform: rotate(-180deg) translateX(12px) } 75% { transform: rotate(-180deg) translateX(12px) } 100% { transform: rotate(-360deg) translateX(12px) } } </style> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= webpackConfig.name %></title> </head> <body> <div id="app"> <div class="sampleContainer"> <div class="loader"> <span class="dot dot_1"></span> <span class="dot dot_2"></span> <span class="dot dot_3"></span> <span class="dot dot_4"></span> </div> </div> </div> <!-- built files will be auto injected --> </body> </html>