The loadingjquery plug-in can center the Loading indicator relative to the container.
Center-Loader is a jQuery plug-in that can Center the Loading indicator relative to the container. This plug-in can use images or font-awesome font icons as Loading indicators, and can absolutely center the indicators relative to a container or the entire page.
Download Online Preview source code
Usage
Using this plug-in requires the introduction of jQuery and center-loader.js files.
12 |
< script src = "dist/jquery.min.js" ></ script > < script src = "dist/center-loader.js" ></ script > |
If you need to use the font-awesome font icon, you also need to introduce the CSS file of the font-awesome font icon.
1 |
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" > |
Initialize the plug-in
If you use font-awesome as the Loading indicator, you can use the following method to initialize the plug-in.
1234 |
// Display the Loading indicator $( '#container' ).loader( 'show' , '<i class="fa fa-cog fa-spin"></i>' ); // Hide the Laoding indicator $( '#container' ).loader( 'hide' ); |
You can also use a GIF image as the Laoding indicator:
1234 |
// Display the Loading indicator $( '#container' ).loader( 'show' , '' ); // Hide the Laoding indicator $( '#container' ).loader( 'hide' ); |
For more examples, see the Demo.