check loading

Default options:

defaults = {
    'position': "right",        // right | inside | overlay
    'text': "",                 // Text to display next to the loader
    'class': "icon-refresh",    // loader CSS class
    'tpl': '<span class="isloading-wrapper %wrapper%">%text%<i class="%class% icon-spin"></i></span>',
    'disableSource': true,      // true | false
    'disableOthers': []
};
            

Basic Loading

This is the most basic setup. Just use $( "selector" ).isLoading(); and you are done for the setup.
When your action (data loading, etc...) is done, just call $( "selector" ).isLoading( "hide" ); and you are done.

Content Loaded

1. $(function() {
3. // Action on Click
4. $( "#basic .btn" ).click(function() {
6. $( this ).isLoading();
8. // Load data or whatever
9. $( "#basic .demo p" ).removeClass("alert-success");
11. // Data Loaded, re-enable event
12. setTimeout( function(){
14. // Deactivate the loading plugin
15. $( "#basic .btn" ).isLoading( "hide" );
17. $( "#basic .demo p" ).html( "Content Loaded" )
18. .addClass("alert-success");
19. }, 1000 );
20. });
22. });

Load in Tag

This demo shows how to show the loading message inside the target. $( "selector" ).isLoading({ text: "Loading", position: "inside" });
If you want to disable some extra tags/input/etc... while the loading is active, you can use the disableOthers[] option.

Content Loaded

1. $(function() {
3. // Action on Click
4. $( "#load-in-div .btn" ).click(function() {
6. // Setup Loading plugin
7. $( "#load-in-div .demo p" ).removeClass("alert-success").isLoading({
8. text: "Loading",
9. position: "inside",
10. disableOthers: [
11. $( "#load-in-div .btn" )
12. ]
13. });
15. // Re-enabling event
16. setTimeout( function(){
17. $( "#load-in-div .demo p" ).isLoading( "hide" )
18. .html( "Content Loaded" )
19. .addClass("alert-success");
20. }, 1000 );
22. });
24. });

Overlay

1. $(function() {
3. // Action on Click
4. $( "#load-overlay .btn" ).click(function() {
6. $.isLoading({ text: "Loading" });
8. // Setup Loading plugin
9. $( "#load-overlay .demo p" ).removeClass("alert-success");
11. // Re-enabling event
12. setTimeout( function(){
13. $.isLoading( "hide" );
14. $( "#load-overlay .demo p" ).html( "Content Loaded" )
15. .addClass("alert-success");
16. }, 2000 );
18. });
20. });

Overlay on Tag

1. $(function() {
3. // Action on Click
4. $( "#load-overlay-elt .btn" ).click(function() {
6. $( "#load-overlay-elt .demo" ).isLoading({
7. text: "Loading",
8. position: "overlay"
9. });
11. // Setup Loading plugin
12. $( "#load-overlay-elt .demo p" ).removeClass("alert-success");
14. // Re-enabling event
15. setTimeout( function(){
16. $( "#load-overlay-elt .demo" ).isLoading( "hide" );
17. $( "#load-overlay-elt .demo p" ).html( "Content Loaded" )
18. .addClass("alert-success");
19. }, 2000 );
21. });
23. });
24. 
    

Download: tại đây

link website: http://hekigan.github.io/is-loading/#overlay