1 |
|
2 |
|
3 |
|
4 |
|
5 | .ant-spin {
|
6 | box-sizing: border-box;
|
7 | margin: 0;
|
8 | padding: 0;
|
9 | color: rgba(0, 0, 0, 0.85);
|
10 | font-size: 14px;
|
11 | font-variant: tabular-nums;
|
12 | line-height: 1.5715;
|
13 | list-style: none;
|
14 | font-feature-settings: 'tnum';
|
15 | position: absolute;
|
16 | display: none;
|
17 | color: #1890ff;
|
18 | text-align: center;
|
19 | vertical-align: middle;
|
20 | opacity: 0;
|
21 | transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
22 | }
|
23 | .ant-spin-spinning {
|
24 | position: static;
|
25 | display: inline-block;
|
26 | opacity: 1;
|
27 | }
|
28 | .ant-spin-nested-loading {
|
29 | position: relative;
|
30 | }
|
31 | .ant-spin-nested-loading > div > .ant-spin {
|
32 | position: absolute;
|
33 | top: 0;
|
34 | left: 0;
|
35 | z-index: 4;
|
36 | display: block;
|
37 | width: 100%;
|
38 | height: 100%;
|
39 | max-height: 400px;
|
40 | }
|
41 | .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
|
42 | position: absolute;
|
43 | top: 50%;
|
44 | left: 50%;
|
45 | margin: -10px;
|
46 | }
|
47 | .ant-spin-nested-loading > div > .ant-spin .ant-spin-text {
|
48 | position: absolute;
|
49 | top: 50%;
|
50 | width: 100%;
|
51 | padding-top: 5px;
|
52 | text-shadow: 0 1px 2px #fff;
|
53 | }
|
54 | .ant-spin-nested-loading > div > .ant-spin.ant-spin-show-text .ant-spin-dot {
|
55 | margin-top: -20px;
|
56 | }
|
57 | .ant-spin-nested-loading > div > .ant-spin-sm .ant-spin-dot {
|
58 | margin: -7px;
|
59 | }
|
60 | .ant-spin-nested-loading > div > .ant-spin-sm .ant-spin-text {
|
61 | padding-top: 2px;
|
62 | }
|
63 | .ant-spin-nested-loading > div > .ant-spin-sm.ant-spin-show-text .ant-spin-dot {
|
64 | margin-top: -17px;
|
65 | }
|
66 | .ant-spin-nested-loading > div > .ant-spin-lg .ant-spin-dot {
|
67 | margin: -16px;
|
68 | }
|
69 | .ant-spin-nested-loading > div > .ant-spin-lg .ant-spin-text {
|
70 | padding-top: 11px;
|
71 | }
|
72 | .ant-spin-nested-loading > div > .ant-spin-lg.ant-spin-show-text .ant-spin-dot {
|
73 | margin-top: -26px;
|
74 | }
|
75 | .ant-spin-container {
|
76 | position: relative;
|
77 | transition: opacity 0.3s;
|
78 | }
|
79 | .ant-spin-container::after {
|
80 | position: absolute;
|
81 | top: 0;
|
82 | right: 0;
|
83 | bottom: 0;
|
84 | left: 0;
|
85 | z-index: 10;
|
86 | display: none \9;
|
87 | width: 100%;
|
88 | height: 100%;
|
89 | background: #fff;
|
90 | opacity: 0;
|
91 | transition: all 0.3s;
|
92 | content: '';
|
93 | pointer-events: none;
|
94 | }
|
95 | .ant-spin-blur {
|
96 | clear: both;
|
97 | overflow: hidden;
|
98 | opacity: 0.5;
|
99 | -webkit-user-select: none;
|
100 | -moz-user-select: none;
|
101 | -ms-user-select: none;
|
102 | user-select: none;
|
103 | pointer-events: none;
|
104 | }
|
105 | .ant-spin-blur::after {
|
106 | opacity: 0.4;
|
107 | pointer-events: auto;
|
108 | }
|
109 | .ant-spin-tip {
|
110 | color: rgba(0, 0, 0, 0.45);
|
111 | }
|
112 | .ant-spin-dot {
|
113 | position: relative;
|
114 | display: inline-block;
|
115 | font-size: 20px;
|
116 | width: 1em;
|
117 | height: 1em;
|
118 | }
|
119 | .ant-spin-dot-item {
|
120 | position: absolute;
|
121 | display: block;
|
122 | width: 9px;
|
123 | height: 9px;
|
124 | background-color: #1890ff;
|
125 | border-radius: 100%;
|
126 | transform: scale(0.75);
|
127 | transform-origin: 50% 50%;
|
128 | opacity: 0.3;
|
129 | -webkit-animation: antSpinMove 1s infinite linear alternate;
|
130 | animation: antSpinMove 1s infinite linear alternate;
|
131 | }
|
132 | .ant-spin-dot-item:nth-child(1) {
|
133 | top: 0;
|
134 | left: 0;
|
135 | }
|
136 | .ant-spin-dot-item:nth-child(2) {
|
137 | top: 0;
|
138 | right: 0;
|
139 | -webkit-animation-delay: 0.4s;
|
140 | animation-delay: 0.4s;
|
141 | }
|
142 | .ant-spin-dot-item:nth-child(3) {
|
143 | right: 0;
|
144 | bottom: 0;
|
145 | -webkit-animation-delay: 0.8s;
|
146 | animation-delay: 0.8s;
|
147 | }
|
148 | .ant-spin-dot-item:nth-child(4) {
|
149 | bottom: 0;
|
150 | left: 0;
|
151 | -webkit-animation-delay: 1.2s;
|
152 | animation-delay: 1.2s;
|
153 | }
|
154 | .ant-spin-dot-spin {
|
155 | transform: rotate(45deg);
|
156 | -webkit-animation: antRotate 1.2s infinite linear;
|
157 | animation: antRotate 1.2s infinite linear;
|
158 | }
|
159 | .ant-spin-sm .ant-spin-dot {
|
160 | font-size: 14px;
|
161 | }
|
162 | .ant-spin-sm .ant-spin-dot i {
|
163 | width: 6px;
|
164 | height: 6px;
|
165 | }
|
166 | .ant-spin-lg .ant-spin-dot {
|
167 | font-size: 32px;
|
168 | }
|
169 | .ant-spin-lg .ant-spin-dot i {
|
170 | width: 14px;
|
171 | height: 14px;
|
172 | }
|
173 | .ant-spin.ant-spin-show-text .ant-spin-text {
|
174 | display: block;
|
175 | }
|
176 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
177 |
|
178 | .ant-spin-blur {
|
179 | background: #fff;
|
180 | opacity: 0.5;
|
181 | }
|
182 | }
|
183 | @-webkit-keyframes antSpinMove {
|
184 | to {
|
185 | opacity: 1;
|
186 | }
|
187 | }
|
188 | @keyframes antSpinMove {
|
189 | to {
|
190 | opacity: 1;
|
191 | }
|
192 | }
|
193 | @-webkit-keyframes antRotate {
|
194 | to {
|
195 | transform: rotate(405deg);
|
196 | }
|
197 | }
|
198 | @keyframes antRotate {
|
199 | to {
|
200 | transform: rotate(405deg);
|
201 | }
|
202 | }
|
203 | .ant-spin-rtl {
|
204 | direction: rtl;
|
205 | }
|
206 | .ant-spin-rtl .ant-spin-dot-spin {
|
207 | transform: rotate(-45deg);
|
208 | -webkit-animation-name: antRotateRtl;
|
209 | animation-name: antRotateRtl;
|
210 | }
|
211 | @-webkit-keyframes antRotateRtl {
|
212 | to {
|
213 | transform: rotate(-405deg);
|
214 | }
|
215 | }
|
216 | @keyframes antRotateRtl {
|
217 | to {
|
218 | transform: rotate(-405deg);
|
219 | }
|
220 | }
|