sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add a loading animation

Browse Source 
Former-commit-id: b93d101e24ba050c20846ac845ef92d05537ff6e
Former-commit-id: 94a6961230536ddf431c12b569f8500e6584bda8
Former-commit-id: 0843f43c76bd02930c2f6ef627f0a39f64945a6c
This commit is contained in:
李杨
2018-04-12 20:14:47 +08:00
parent 21ce85aa74
commit 9dfb12d32d
1 changed files with 109 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
index.html
View File

@@ -4,10 +4,118 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>D2Admin</title> <title>D2Admin</title>
<style>
html, body, #app {
height: 100%;
margin: 0px;
padding: 0px;
}
.loading-group {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #8e9eab;
background: -webkit-linear-gradient(to right, #eef2f3, #8e9eab);
background: linear-gradient(to right, #eef2f3, #8e9eab);
}
.title {
color: #FFF;
font-weight: bold;
font-size: 14px;
margin-top: 40px;
margin-bottom: 10px;
letter-spacing: 0.2em;
}
.sub-title {
color: #FFF;
font-size: 10px;
}
.sk-cube-grid {
width: 30px;
height: 30px;
}
.sk-cube-grid .sk-cube {
width: 10px;
height: 10px;
background-color: #FFF;
float: left;
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1 {
border-top-left-radius: 4px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
border-top-right-radius: 4px;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
border-bottom-left-radius: 4px;
-webkit-animation-delay: 0s;
animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
border-bottom-right-radius: 4px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
@-webkit-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
@keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
</style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
loading <div class="loading-group">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
<div class="title">加载中</div>
<div class="sub-title">初次加载会比较慢，请耐心等待</div>
</div>
</div> </div>
</body> </body>
</html> </html>