|
1 |
| - html { |
2 |
| - background: #333; |
3 |
| - } |
4 |
| - |
5 |
| - .app-loading { |
6 |
| - position: fixed; |
7 |
| - top: 0; |
8 |
| - right: 0; |
9 |
| - bottom: 0; |
10 |
| - left: 0; |
11 |
| - z-index: 9999; |
12 |
| - max-width: 640px; |
13 |
| - margin: auto; |
14 |
| - display: flex; |
15 |
| - align-items: center; |
16 |
| - justify-content: center; |
17 |
| - transition: all 0.3s; |
18 |
| - background: #80bd01; |
19 |
| - } |
20 |
| - |
21 |
| - .app-loading-hide { |
22 |
| - left: 120%; |
23 |
| - bottom: 120%; |
24 |
| - opacity: 0; |
25 |
| - } |
26 |
| - |
27 |
| - .app-loading .box { |
28 |
| - width: 400px; |
29 |
| - height: 300px; |
30 |
| - text-align: center; |
31 |
| - color: #fff; |
32 |
| - } |
33 |
| - |
34 |
| - @keyframes line-spin-fade-loader { |
35 |
| - 50% { |
36 |
| - opacity: 0.3; |
37 |
| - } |
38 |
| - 100% { |
39 |
| - opacity: 1; |
40 |
| - } |
41 |
| - } |
42 |
| - |
43 |
| - .app-loading .line-spin-fade-loader { |
44 |
| - position: relative; |
45 |
| - width: 0; |
46 |
| - margin: 0 auto; |
47 |
| - } |
48 |
| - |
49 |
| - .app-loading .line-spin-fade-loader > div:nth-child(1) { |
50 |
| - top: 20px; |
51 |
| - left: 0; |
52 |
| - animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out; |
53 |
| - } |
54 |
| - |
55 |
| - .app-loading .line-spin-fade-loader > div:nth-child(2) { |
56 |
| - top: 13.63636px; |
57 |
| - left: 13.63636px; |
58 |
| - transform: rotate(-45deg); |
59 |
| - animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out; |
60 |
| - } |
61 |
| - |
62 |
| - .app-loading .line-spin-fade-loader > div:nth-child(3) { |
63 |
| - top: 0; |
64 |
| - left: 20px; |
65 |
| - transform: rotate(90deg); |
66 |
| - animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out; |
67 |
| - } |
68 |
| - |
69 |
| - .app-loading .line-spin-fade-loader > div:nth-child(4) { |
70 |
| - top: -13.63636px; |
71 |
| - left: 13.63636px; |
72 |
| - transform: rotate(45deg); |
73 |
| - animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out; |
74 |
| - } |
75 |
| - |
76 |
| - .app-loading .line-spin-fade-loader > div:nth-child(5) { |
77 |
| - top: -20px; |
78 |
| - left: 0; |
79 |
| - animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out; |
80 |
| - } |
81 |
| - |
82 |
| - .app-loading .line-spin-fade-loader > div:nth-child(6) { |
83 |
| - top: -13.63636px; |
84 |
| - left: -13.63636px; |
85 |
| - transform: rotate(-45deg); |
86 |
| - animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out; |
87 |
| - } |
88 |
| - |
89 |
| - .app-loading .line-spin-fade-loader > div:nth-child(7) { |
90 |
| - top: 0; |
91 |
| - left: -20px; |
92 |
| - transform: rotate(90deg); |
93 |
| - animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out; |
94 |
| - } |
95 |
| - |
96 |
| - .app-loading .line-spin-fade-loader > div:nth-child(8) { |
97 |
| - top: 13.63636px; |
98 |
| - left: -13.63636px; |
99 |
| - transform: rotate(45deg); |
100 |
| - animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out; |
101 |
| - } |
102 |
| - |
103 |
| - .app-loading .line-spin-fade-loader > div { |
104 |
| - background-color: #fff; |
105 |
| - width: 4px; |
106 |
| - height: 35px; |
107 |
| - border-radius: 2px; |
108 |
| - margin: 2px; |
109 |
| - animation-fill-mode: both; |
110 |
| - position: absolute; |
111 |
| - width: 5px; |
112 |
| - height: 15px; |
113 |
| - } |
114 |
| - |
115 |
| - .app-loading h2 { |
116 |
| - margin-top: 50px; |
117 |
| - line-height: 70px; |
118 |
| - font-size: 40px; |
119 |
| - } |
120 |
| - |
121 |
| - |
122 | 1 | .common-toast {
|
123 | 2 | position: absolute;
|
124 | 3 | top: 50%;
|
|
0 commit comments