CSS and JS to implement the animation effect in page loading example

This example for everyone to share the JS implementation of Web page loading effect of the specific code for your reference, the specific content as follows

Required Materials:

A GIF picture of a loading animation

Basic logic:

Modal Frame mask + loading.gif motion diagram,
Default Hidden Modal box
When the page starts sending Ajax request data, the modal box is displayed
Request complete, hide modal box

Below, we create a new Web application via Django to simply practice

Practice

1. Create a new Django project that creates the application App01, configures the routing and static, and slightly. Place the animated GIF into a static folder with the following structure:

2. A function is defined in the view that returns the page test.html:

def test (Request): Return render (Request, ' test.html ')

The 3.test.html page is as follows:

<! DOCTYPE html>
The 4.CSS style is as follows:

/* Modal frame style */.loading {position:fixed; top:0; bottom:0; right:0; left:0; background-color:black; opacity:0.4; z-inde x:1000;} /* Dynamic Chart style */.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;}
Description


 

 
  
 
   
By setting the position:fixed and making the upper and lower left and right 0, the modal frame covers the whole page;
 
   
Set GIF animated image as background, center, to show loading effect;
 
   
By setting the Z-index value, the GIF image is suspended above the modal frame;
 
   
Background-color:black; is to look at the obvious, specific use can be set to white;
 
  

 
The 5.JS files are as follows:

$ (function () {///Prepare request data, show modal Box $ (' p.loading '). Show (); $.ajax ({  URL: "/ajax_handler.html/",  type: ' GET ',  Data: {},  Success:function (response) {   var content = response.content;   $ (' #content '). HTML (content);   Request complete, hide modal box   $ (' p.loading '). Hide ();  },  error:function () {   $ (' #content '). HTML (' Server error ... ') ;   Request complete, hide modal box   $ (' p.loading '). Hide ();})  });
Description

After the page is loaded, the AJAX request is sent and the data is requested from the server-side Ajax_handler view, and the modal box is displayed
After the request is complete, hide the modal box, whether successful or not

The 6.ajax_handler view, which simulates network latency and returns some strings, is as follows:

From django.http import jsonresponsefrom django.utils.safestring import Mark_safe # cancel string escape def ajax_handler (request): # modulo Proposed network delay import time Time.sleep (3) msg = ' XXX ' # Here you can put some string return Jsonresponse ({"Content": Mark_safe (MSG)})
The effect is as follows: