[Js open source component development] loading effect, jsloading

[Js open source component development] loading effect, jsloading
Loading Effect

Because of the program and the network, we often need to give the user an animation being loaded during interaction, so the loading component was born. Most services can be completed without complex code. This is my principle of component creation.

The effect is as follows:

Three different effects are demonstrated here.

1. The loading effect is displayed on the button itself, which is excellent.

2. The loading effect is displayed on other dom,

3. loading is displayed in full screen mode, which is not clear.

Instance demo please click here http://www.lovewebgames.com/jsmodule/loading.html

Github hosting source code please click here https://github.com/tianxiangbing/loading

 

Call example

Html:

<P> <input type = "button" id = "loading1" value = "loading myself"> <input type = "button" id = "loading2" value = "loading this div "> <input type =" button "id =" loading3 "value =" loading full screen "> </p> <div id =" loading-content "style =" width: 300px; height: 200px; border: 1px solid # ccc; background-color: # f2f2f2; "> This is an example of content </div> <script src = ".. /src/jquery-1.11.2.js> </script> <script src = ".. /src/loading. js "> </script>

 

Js:

// Loading myself $ ('# loading1 '). click (function () {var load = new Loading (); load. init ({target: this}); load. start (); setTimeout (function () {load. stop () ;}, 3000)}); // The div $ ('# loading2') under loading '). click (function () {var load = new Loading (); load. init ({target: "# loading-content"}); load. start (); setTimeout (function () {load. stop () ;}, 3000)}); // loading full screen $ ('# loading3 '). click (function () {var load = new Loading (); load. init (); load. start (); setTimeout (function () {load. stop () ;}, 30000 )});

 

API property target: string | dom

The loading node needs to be displayed. If no value is set, the full-screen loading is displayed.

 

Method start: function ()

Start loading

 

Stop: function ()

End loading

 

Event stop

When the stop event of target is triggered, the end loading. For example, $ ('html '). trigger ('stop') ends the full screen loading animation.