复制扎铁了老心

需要材料：
一张loading动画的gif图片

基本逻辑：
模态框遮罩 + loading.gif动图，
默认隐藏模态框
页面开始发送Ajax请求数据时，显示模态框
请求完成，隐藏模态框

下面我们通过Django新建一个web应用，来简单实践下

实践
新建一个Django项目，创建应用app01, 配置好路由和static，略。将gif动图放到静态文件夹下，结构如下：

视图中定义一个函数，它返回页面test.html：

def test(request):
return render(request, ‘test.html’)
1
2

test.html页面如下：

Title

你好啊，朋友！

---

正在请求服务器数据....

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

CSS样式如下：

/* 模态框样式 */
.loading {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: black;
opacity: 0.4;
z-index: 1000;
}

/* 动图样式 */
.loading .gif {
height: 32px;
width: 32px;
background: url(’/static/img/loading.gif’);
position: fixed;
left: 50%;
top: 50%;
margin-left: -16px;
margin-top: -16px;
z-index: 1001;
}

作者：Ayhan_huang
来源：CSDN
原文：https://blog.csdn.net/Ayhan_huang/article/details/78226008
版权声明：本文为博主原创文章，转载请附上博文链接！