通过ajax方式在界面上加载loading状态(仅作记录)
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 }
reset.css
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 }
style.css
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状态(仅作记录)的更多相关文章
- jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...
- python如何从内存地址上加载pythn对象
python如何从内存地址上加载pythn对象 在python中我们可以通过id函数来获取某个python对象的内存地址,或者可以通过调用对象的__repr__魔术函数来获取对象的详细信息 def t ...
- 界面动态加载时报NullPointException
今天在做环境监测的模拟软件时,登陆页面报NullPointException 一般像我们初始化Button时,是Button btn=(Button)findViewById(R.id.button1 ...
- php+ajax实现登录按钮加载loading效果
php+ajax实现登录按钮加载loading效果,一个提高用户体验,二个避免重复提交表单,ajax判断加载是否完成. 登录表单 <form onsubmit="return chec ...
- 谈谈加载(Loading)的那点事
谈谈加载(Loading)的那点事 2013/10/12 | 分类: 设计 | 0 条评论 | 标签: 交互设计, 加载 分享到:33 原文出处: 搜狐焦点 对于加载(loading),想必大家都不陌 ...
- [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...
- vue axios配置 发起请求加载loading请求结束关闭loading
axios带有请求拦截器,避免在每个请求里面加loading重复操作,可以封装进去,在请求开始时加载loading层,请求结束关闭,loading层用vux的loading加载 axios.js im ...
- 基于jQuery的图片加载loading效果插件
基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...
随机推荐
- mysql基础之忘掉密码解决办法及恢复root最高权限办法
如果忘记了mysql的root用户的密码,可以使用如下的方法,重置root密码. 方法一: 1.停止当前mysql进程 systemctl stop mariadb 2.mysql进程停止后,使用如下 ...
- Linux进阶之日志管理
一.何为日志 1.在程序执行时,可以通过标准输出以及错误输出,让我们知道程序的执行情况,而系统不可能将所有程序的输出信息一起显示,要知道后台执行的程序非常之多,如果一起显示,那我们不用操作了,整天只看 ...
- Lua中的元表(metatable)、元方法(metamethod)详解
在第一次看见这两样东西的时候,可能会觉得它很深奥,但其实很好理解,虽然实际上它可能真的很深奥.(小若:停!滚粗.) 1.知道为什么1 + 1 = 2吗? 为什么在Lua中,1+1会等于2呢?(小若:难 ...
- Centos双网卡配置默认路由
Centos6.5 双网卡,我们只需要一个默认路由,如果两个都有或都没有会有一系列的问题 [root@centos]# vi /etc/sysconfig/network修改以下内容NETWORKIN ...
- global nonlocal 闭包构建 变量名解析原则
- Python+Selenium学习笔记16 - unittest单元测试框架
unittest单元测试框架包括 Test Case, Test Suite, Test Runner, Test Fixture Test Cases 组成Test Suite, Test Run ...
- TheSuperego 实验五 团队作业2：毕业设计选题系统
项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/2018CST 这个作业要求链接 https://www.cnblogs.com/nwnu-dai ...
- 系统芯片（SOC）架构- Aviral Mittal
系统芯片(SOC)架构- Aviral Mittal System on Chip Architecture-Aviral Mittal 此技术是在设计片上系统时考虑体系结构级别的因素.同样,范围是围 ...
- LeetCode：322. 零钱兑换
链接:https://leetcode-cn.com/problems/coin-change/ 标签:动态规划.完全背包问题.广度优先搜索 题目 给定不同面额的硬币 coins 和一个总金额 amo ...
- SpringBoot2配置文件application.yaml
源码基于SpringBoot 2.4.4 1.认识配置文件 1.1 配置文件的加载 创建SpringBoot项目的时候,会自动创建一个application.properties文件,该文件是Spri ...