Skip to content

Commit f2b32fe

Browse files
houkohouko
committed
加上loading
1 parent 85e6594 commit f2b32fe

File tree

3 files changed

+156
-2
lines changed

3 files changed

+156
-2
lines changed

‎web/admin/public/index.html‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,30 @@
1414
<script src="/node_modules/zone.js/dist/long-stack-trace-zone.min.js"></script>
1515
</head>
1616
<body>
17-
<app><h1>载入中...</h1></app>
17+
<app>
18+
<div class="container">
19+
<div class="spinner">
20+
<div class="spinner-container container1">
21+
<div class="circle1"></div>
22+
<div class="circle2"></div>
23+
<div class="circle3"></div>
24+
<div class="circle4"></div>
25+
</div>
26+
<div class="spinner-container container2">
27+
<div class="circle1"></div>
28+
<div class="circle2"></div>
29+
<div class="circle3"></div>
30+
<div class="circle4"></div>
31+
</div>
32+
<div class="spinner-container container3">
33+
<div class="circle1"></div>
34+
<div class="circle2"></div>
35+
<div class="circle3"></div>
36+
<div class="circle4"></div>
37+
</div>
38+
</div>
39+
</div>
40+
</app>
1841

1942
</body>
2043
</html>

‎web/admin/public/style/loading.scss‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
.spinner {
2+
margin: 100px auto;
3+
width: 200px;
4+
height: 200px;
5+
position: relative;
6+
}
7+
8+
.container1 > div, .container2 > div, .container3 > div {
9+
width: 60px;
10+
height: 60px;
11+
background-color: #333;
12+
13+
border-radius: 100%;
14+
position: absolute;
15+
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
16+
animation: bouncedelay 1.2s infinite ease-in-out;
17+
-webkit-animation-fill-mode: both;
18+
animation-fill-mode: both;
19+
}
20+
21+
.spinner .spinner-container {
22+
position: absolute;
23+
width: 100%;
24+
height: 100%;
25+
}
26+
27+
.container2 {
28+
-webkit-transform: rotateZ(45deg);
29+
transform: rotateZ(45deg);
30+
}
31+
32+
.container3 {
33+
-webkit-transform: rotateZ(90deg);
34+
transform: rotateZ(90deg);
35+
}
36+
37+
.circle1 {
38+
top: 0;
39+
left: 0;
40+
}
41+
42+
.circle2 {
43+
top: 0;
44+
right: 0;
45+
}
46+
47+
.circle3 {
48+
right: 0;
49+
bottom: 0;
50+
}
51+
52+
.circle4 {
53+
left: 0;
54+
bottom: 0;
55+
}
56+
57+
.container2 .circle1 {
58+
-webkit-animation-delay: -1.1s;
59+
animation-delay: -1.1s;
60+
}
61+
62+
.container3 .circle1 {
63+
-webkit-animation-delay: -1.0s;
64+
animation-delay: -1.0s;
65+
}
66+
67+
.container1 .circle2 {
68+
-webkit-animation-delay: -0.9s;
69+
animation-delay: -0.9s;
70+
}
71+
72+
.container2 .circle2 {
73+
-webkit-animation-delay: -0.8s;
74+
animation-delay: -0.8s;
75+
}
76+
77+
.container3 .circle2 {
78+
-webkit-animation-delay: -0.7s;
79+
animation-delay: -0.7s;
80+
}
81+
82+
.container1 .circle3 {
83+
-webkit-animation-delay: -0.6s;
84+
animation-delay: -0.6s;
85+
}
86+
87+
.container2 .circle3 {
88+
-webkit-animation-delay: -0.5s;
89+
animation-delay: -0.5s;
90+
}
91+
92+
.container3 .circle3 {
93+
-webkit-animation-delay: -0.4s;
94+
animation-delay: -0.4s;
95+
}
96+
97+
.container1 .circle4 {
98+
-webkit-animation-delay: -0.3s;
99+
animation-delay: -0.3s;
100+
}
101+
102+
.container2 .circle4 {
103+
-webkit-animation-delay: -0.2s;
104+
animation-delay: -0.2s;
105+
}
106+
107+
.container3 .circle4 {
108+
-webkit-animation-delay: -0.1s;
109+
animation-delay: -0.1s;
110+
}
111+
112+
@-webkit-keyframes bouncedelay {
113+
0%, 80%, 100% {
114+
-webkit-transform: scale(0.0)
115+
}
116+
40% {
117+
-webkit-transform: scale(1.0)
118+
}
119+
}
120+
121+
@keyframes bouncedelay {
122+
0%, 80%, 100% {
123+
transform: scale(0.0);
124+
-webkit-transform: scale(0.0);
125+
}
126+
40% {
127+
transform: scale(1.0);
128+
-webkit-transform: scale(1.0);
129+
}
130+
}

‎web/admin/public/style/style.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
@import "~todomvc-common/base.css";
33
@import "~bootstrap/dist/css/bootstrap.css";
44
@import "./base.scss";
5-
@import "./index.scss";
5+
@import "./index.scss";
6+
@import "./loading.scss";

0 commit comments

Comments
 (0)