通过ajax方式在界面上加载loading状态(仅作记录)
2021-01-17 14:11
标签：round eth lap gre server nsf ons csr tom 通过ajax方式在界面上加载loading状态(仅作记录) 标签：round eth lap gre server nsf ons csr tom 原文地址：https://www.cnblogs.com/mianbaoshu/p/8004760.html
1 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
2 pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
3 q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
4 dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
5 thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
6 footer, header, hgroup, menu, nav, output, ruby, section, summary, time,
7 mark, audio, video {
8 margin: 0;
9 padding: 0;
10 border: 0;
11 }
12
13 article, aside, details, figcaption, figure, footer, header, hgroup,
14 menu, nav, section {
15 display: block
16 }
17
18 body {
19 line-height: 1
20 }
21
22 ol, ul {
23 list-style: none
24 }
25
26 blockquote, q {
27 quotes: none
28 }
29
30 blockquote:before, blockquote:after, q:before, q:after {
31 content: ‘‘;
32 content: none
33 }
34
35 table {
36 border-collapse: collapse;
37 border-spacing: 0
38 }
1 /* BODY {
2 background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%), -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%);
3 background: linear-gradient(45deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%), linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%);
4 -webkit-background-size: 1em 1em;
5 background-size: 1em 1em;
6 background-color: #000;
7 } */
8
9 .l-wrapper {
10 position: absolute;
11 width: 480px;
12 height: 300px;
13 top: 0;
14 right: 0;
15 bottom: 0;
16 left: 0;
17 margin: auto;
18 text-align: center;
19 }
20
21 svg {
22 height: 120px;
23 width: 120px;
24 margin: 0 2em 2em;
25 overflow: visible;
26 /* border: 1px solid red; */
27 }
28
29 .g-circles {
30 -webkit-transform: scale(0.9) translate(7px, 7px);
31 -ms-transform: scale(0.9) translate(7px, 7px);
32 transform: scale(0.9) translate(7px, 7px);
33 }
34
35 circle {
36 fill: dodgerblue;
37 fill-opacity: 0;
38 -webkit-animation: opacity 1.2s linear infinite;
39 animation: opacity 1.2s linear infinite;
40 }
41 circle:nth-child(12n + 1) {
42 -webkit-animation-delay: -0.1s;
43 animation-delay: -0.1s;
44 }
45 circle:nth-child(12n + 2) {
46 -webkit-animation-delay: -0.2s;
47 animation-delay: -0.2s;
48 }
49 circle:nth-child(12n + 3) {
50 -webkit-animation-delay: -0.3s;
51 animation-delay: -0.3s;
52 }
53 circle:nth-child(12n + 4) {
54 -webkit-animation-delay: -0.4s;
55 animation-delay: -0.4s;
56 }
57 circle:nth-child(12n + 5) {
58 -webkit-animation-delay: -0.5s;
59 animation-delay: -0.5s;
60 }
61 circle:nth-child(12n + 6) {
62 -webkit-animation-delay: -0.6s;
63 animation-delay: -0.6s;
64 }
65 circle:nth-child(12n + 7) {
66 -webkit-animation-delay: -0.7s;
67 animation-delay: -0.7s;
68 }
69 circle:nth-child(12n + 8) {
70 -webkit-animation-delay: -0.8s;
71 animation-delay: -0.8s;
72 }
73 circle:nth-child(12n + 9) {
74 -webkit-animation-delay: -0.9s;
75 animation-delay: -0.9s;
76 }
77 circle:nth-child(12n + 10) {
78 -webkit-animation-delay: -1s;
79 animation-delay: -1s;
80 }
81 circle:nth-child(12n + 11) {
82 -webkit-animation-delay: -1.1s;
83 animation-delay: -1.1s;
84 }
85 circle:nth-child(12n + 12) {
86 -webkit-animation-delay: -1.2s;
87 animation-delay: -1.2s;
88 }
89
90 .g-circles--v2 circle {
91 fill-opacity: 0;
92 stroke-opacity: 0;
93 stroke-width: 1;
94 stroke: yellowgreen;
95 -webkit-animation-name: opacity-stroke, colors, colors-stroke, transform-2;
96 animation-name: opacity-stroke, colors, colors-stroke, transform-2;
97 }
98
99 .g-circles--v3 circle {
100 fill-opacity: 1;
101 -webkit-animation-name: opacity, colors;
102 animation-name: opacity, colors;
103 }
104
105 .g-circles--v4 circle {
106 fill-opacity: 1;
107 fill: orange;
108 -webkit-transform-origin: 60px 60px;
109 -ms-transform-origin: 60px 60px;
110 transform-origin: 60px 60px;
111 -webkit-animation-name: opacity, colors-3, transform;
112 animation-name: opacity, colors-3, transform;
113 }
114
115 @-webkit-keyframes opacity {
116 3% {
117 fill-opacity: 1;
118 }
119
120 75% {
121 fill-opacity: 0;
122 }
123 }
124
125 @keyframes opacity {
126 3% {
127 fill-opacity: 1;
128 }
129
130 75% {
131 fill-opacity: 0;
132 }
133 }
134 @-webkit-keyframes opacity-stroke {
135 10% {
136 stroke-opacity: 1;
137 }
138
139 85% {
140 stroke-opacity: 0;
141 }
142 }
143 @keyframes opacity-stroke {
144 10% {
145 stroke-opacity: 1;
146 }
147
148 85% {
149 stroke-opacity: 0;
150 }
151 }
152 @-webkit-keyframes colors {
153 0% {
154 fill: yellowgreen;
155 }
156
157 10% {
158 fill: gold;
159 }
160
161 75% {
162 fill: crimson;
163 }
164 }
165 @keyframes colors {
166 0% {
167 fill: yellowgreen;
168 }
169
170 10% {
171 fill: gold;
172 }
173
174 75% {
175 fill: crimson;
176 }
177 }
178 @-webkit-keyframes colors-stroke {
179 0% {
180 stroke: yellowgreen;
181 }
182
183 10% {
184 stroke: gold;
185 }
186
187 75% {
188 stroke: crimson;
189 }
190 }
191 @keyframes colors-stroke {
192 0% {
193 stroke: yellowgreen;
194 }
195
196 10% {
197 stroke: gold;
198 }
199
200 75% {
201 stroke: crimson;
202 }
203 }
204 @-webkit-keyframes colors-2 {
205 0% {
206 fill: yellow;
207 }
208
209 50% {
210 fill: red;
211 }
212
213 65% {
214 fill: orangered;
215 }
216
217 95% {
218 fill: gold;
219 }
220 }
221 @keyframes colors-2 {
222 0% {
223 fill: yellow;
224 }
225
226 50% {
227 fill: red;
228 }
229
230 65% {
231 fill: orangered;
232 }
233
234 95% {
235 fill: gold;
236 }
237 }
238 @-webkit-keyframes colors-3 {
239 0% {
240 fill: yellowgreen;
241 }
242
243 50% {
244 fill: turquoise;
245 }
246
247 65% {
248 fill: yellow;
249 }
250
251 95% {
252 fill: orange;
253 }
254 }
255 @keyframes colors-3 {
256 0% {
257 fill: yellowgreen;
258 }
259
260 50% {
261 fill: turquoise;
262 }
263
264 65% {
265 fill: yellow;
266 }
267
268 95% {
269 fill: orange;
270 }
271 }
272 @-webkit-keyframes transform {
273 10% {
274 -webkit-transform: scale(0.75);
275 transform: scale(0.75);
276 }
277 }
278 @keyframes transform {
279 10% {
280 -webkit-transform: scale(0.75);
281 transform: scale(0.75);
282 }
283 }
284 @-webkit-keyframes transform-2 {
285 40% {
286 -webkit-transform: scale(0.85);
287 transform: scale(0.85);
288 }
289
290 60% {
291 stroke-width: 20;
292 }
293 }
294 @keyframes transform-2 {
295 40% {
296 -webkit-transform: scale(0.85);
297 transform: scale(0.85);
298 }
299
300 60% {
301 stroke-width: 20;
302 }
303 }
1 DOCTYPE>
2 html>
3 head>
4 meta charset="utf-8">link rel="stylesheet" href="reset.css">
5 link rel="stylesheet" href="style.css" media="screen" type="text/css">
6 head>
7
8 body>
9 form class="form-horizontal " id="my_servers_id" method = ‘post‘ >
10 {% csrf_token %}
11 div id=‘table_server‘style="overflow-y: auto; height: 300px;">
12 ...
13 ...
14 ...
15 div>
16 button class="btn btn-info" style="width:140px" type="button" onclick="ajax_loading(‘my_servers_id‘,‘{% url ‘videomap-urls:check-user-servers-state‘ %}‘,‘start_server_id‘)" id=‘start_server_id‘ name=‘start_server_name‘ value=‘start_server‘ >
17 i class="icon icon-play-circle">i> Start button>
18 form>
19 div class="l-wrapper" id=‘loading‘ style=‘width:200px;heigth:200px;display:none‘>
20 svg viewBox="0 0 120 120" >
21 g id="circle" class="g-circles g-circles--v1">
22 circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10">circle>
23 circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10">circle>
24 circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10">circle>
25 circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10">circle>
26 circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10">circle>
27 circle id="7" cx="60" cy="110" r="10">circle>
28 circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10">circle>
29 circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10">circle>
30 circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10">circle>
31 circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10">circle>
32 circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10">circle>
33 circle id="1" cx="60" cy="10" r="10">circle>
34 g>
35 svg>
36 div>
37 script>
38 function ajax_loading(form_id,url,button_id){
39 if (button_id){
40 name=document.getElementById(button_id).name
41 value=document.getElementById(button_id).value
42 console.log(name,value)
43 need_data=$(‘#‘+form_id).serialize()+‘&{0}={1}‘.format(name,value)
44 }else{
45 need_data=$(‘#‘+form_id).serialize()
46 }
47 console.log(need_data)
48 document.getElementById(‘loading‘).style.display=‘block‘;
49 $.ajax({
50 url:url,
51 type:"post",
52 dataType: "html",
53 data:need_data,
54 success:function(mes){
55 $(document.body).html( mes);
56 }
57 })
58 }
59 script>
60 body>
61 html>
文章标题：通过ajax方式在界面上加载loading状态(仅作记录)
文章链接：http://soscw.com/index.php/essay/43216.html