Home > Article > Web Front-end > JS and CSS realize animation effect sharing during web page loading

JS and CSS realize animation effect sharing during web page loading

小云云Original: 2018-01-02 09:38:361790browse

This article mainly introduces JS+CSS to realize the animation effect in web page loading in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Required materials:

A gif picture of the loading animation

Basic logic:

Model Mode box mask + loading.gif animation,
Hide the modal box by default
When the page starts to send Ajax request data, the modal box is displayed
The request is completed, the modal box is hidden

Let's create a new web application through Django to simply practice

Practice

1. Create a new Django project, create application app01, configure routing and static, and omit . Place the gif animation in the static folder with the following structure:

2. Define a function in the view, which returns the page test.html:

def test(request):
 return render(request, &#39;test.html&#39;)

3. The test.html page is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!-- 导入css样式 -->
 <link rel="stylesheet" href="/static/css/loading.css" rel="external nofollow" >
 <!-- 导入jquery 和 js文件 -->
 <script src="/static/plugins/jquery-3.2.1.js"></script>
 <script src="/static/js/loading.js"></script>
</head>
<body>

<h1>你好啊，朋友！</h1>
<hr>

<p id="content">
 <p>正在请求服务器数据....</p>
</p>

<!-- 模态框部分 -->
<p class="loading hide">
 <p class="gif"></p>
</p>

</body>
</html>

4. The CSS style is as follows:

/* 模态框样式 */
.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(&#39;/static/img/loading.gif&#39;);
 position: fixed;
 left: 50%;
 top: 50%;
 margin-left: -16px;
 margin-top: -16px;
 z-index: 1001;
}

Instructions:

By setting position: fixed, and setting the top, bottom, left and right to 0, the modal box covers the entire page;
Set the gif dynamic image as the background and center it to show the loading effect;
By setting the z-index value, the gif image is suspended above the modal box;
background-color: black; is to make it look more obvious. It can be set to white when used specifically;

5. The JS file is as follows:

$(function () {
 //准备请求数据，显示模态框
 $(&#39;p.loading&#39;).show();

 $.ajax({
  url: "/ajax_handler.html/",
  type: &#39;GET&#39;,
  data: {},
  success: function (response) {
   var content = response.content;
   $(&#39;#content&#39;).html(content);

   //请求完成，隐藏模态框
   $(&#39;p.loading&#39;).hide();
  },
  error: function () {
   $(&#39;#content&#39;).html(&#39;server error...&#39;);

   //请求完成，隐藏模态框
   $(&#39;p.loading&#39;).hide();
  }
 })
});

Description:

After the page is loaded, it starts sending Ajax requests, requesting data from the server ajax_handler view, and then displays the modal box
After the request is completed , regardless of success or failure, hide the modal box

6.ajax_handler view is as follows, it simulates network delay and returns some strings:

from django.http import JsonResponse
from django.utils.safestring import mark_safe # 取消字符串转义

def ajax_handler(request):
 # 模拟网络延迟
 import time
 time.sleep(3)

 msg = &#39;&#39;&#39; XXX &#39;&#39;&#39; # 这里你可以随便放入一些字符串

 return JsonResponse({"content": mark_safe(msg)})

Effect As follows:

If the gif cannot be displayed, it may be a browser cache problem.

Related recommendations:

Examples of using CSS and JS to achieve animation effects during loading of web pages

Using css to achieve loading animation effects

Discussion on small problems in JS and CSS loading_Basic knowledge

The above is the detailed content of JS and CSS realize animation effect sharing during web page loading. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the sequential execution of WeChat applet promsie.all and promiseNext article：Detailed explanation of the sequential execution of WeChat applet promsie.all and promise

See more

JS and CSS realize animation effect sharing during web page loading

Related articles