H5Loading

A css3-based Loading, pure js is written, does not depend on Jquery, is compatible with all browsers that support H5, css and js files are only 5.7KB in total size, support for custom loading colors, mask colors, loading fade and animation times and loading The Applicability is strong, easy to use.

css3LoadingajaxjsJqueryH5cssjs5.7KBLoadingLoadingloading

View the demo

tutorials

1. css<link rel="stylesheet" type="text/css" href="css/loading.css"/>

2. js <script src="js/loading.js" type="text/javascript" charset="utf-8"></script>

3. loadingwindowH5_loading

4. H5_loadingshow()hide()

5. show()optionoptioncolorloadingbackgroundtimeout(s)scale

6. hide()timeout

8. introduce css: <link rel =" stylesheet "type =" text / css "href =" css / loading.css "/>

9. introduce js: <script src =" js / loading.js "type =" text / javascript "charset =" utf-8 "> </ script>

10. It registers a global object name on the window: H5_loading.

11. The H5_loading object has two methods: show () and hide ().

12. show () accept an object parameter that allows four subparameters: color - loading circle color, background - mask layer color, timeout - fade in animation time (s), scale - zoom factor.

13. hide () accepts a timeout parameter

14. Use example:

    H5_loading.show();    //loding

  H5_loading.show({color:"#666",background:"rgba(0,0,0.5)",timeout:0.5,scale:0.5});   // 0.5loading

    H5_loading.hide();     //loading

    H5_loading.hide(0.5);  //loading0.5s

8. ajax

   $(document).ajaxSend(function(){
       H5_loading.show();
   });
   

   $(document).ajaxComplete(function(){
       H5_loading.hide();
   });