找到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%);
width: 75px;
height: 100px
}
.loader {
position: relative;
width: 44px;
height: 8px;
margin: 12px auto
}
.dot {
display: inline-block;
width: 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>