File Size: 2771KB
Total Views: 351
Date Created:
Last Modified Date:
Official Website: Go to website
License: MIT
Jquery Loading – is a very useful and customizable plugin for loading. It can be used for a specific element on the page and on the entire page of the website.
Features:
- It can be installed with
NPMandBower. - Easy to customize.
- Supports custom animation.
- Can
startandstopas you need.
Install with NPM
$ npm install --save jquery-easy-loadingInstall with Bower
$ bower install jquery-loadingHow to use it:
1. Include the Javascript jquery.loading.min.js at the bottom of the web page.
<script src="path/to/jquery.loading.min.js"></script>2. Include the CSS loading.css in the header of the page.
<link rel="stylesheet" href="css/loading.css">3. Add the basic HTML to the page.
<div id="loading-always" class="loading-div">
<p>This div is always loading</p>
</div>4. Initialize the plugin and we’re ready to go.
$("#loading-always").loading();Plugin’s default options:
| Option | Default value | Description |
|---|---|---|
overlay |
– | jQuery element to be used as overlay. If not informed, the plugin will create a default one |
message |
Loading… | Message to be rendered on the overlay content. Has no effect if a custom ovelay was informed |
theme |
light | Theme to be used for the overlay element. Some default themes are defined on the jquery.loading.css file (include it if you want to use the default themes). Has no effect if a custom ovelay was informed |
shownClass |
loading-shown | Class(es) to be applied to the overlay element when the loading state is started |
hiddenClass |
loading-hidden | Class(es) to be applied to the overlay element when the loading state is stopped |
stoppable |
false | Setting this option to true will make the loading state be stopped if the overlay element is clicked by the user. This option does not override the onClick option |
start |
true | Define whether to start or not the loading state when the plugin is initialized |
onStart |
loading.overlay.fadeIn(150) |
Function to be executed when the loading state is started. Receives the loading object as parameter |
onStop |
loading.overlay.fadeOut(150) |
Function to be executed when the loading state is stopped. Receives the loading object as parameter |
onClick |
– | Function to be executed when the overlay is clicked. Receives the loading object as parameter |
Methods of Interest:
| Method | Return type | Description | Example |
|---|---|---|---|
jQuery.fn.loading |
jQuery |
Initializes the plugin. |
$('#my-loading-element').loading({ ... }) |
jQuery.fn.Loading |
Loading |
Return the internal plugin object associated to the jQuery element. Also initialize the plugin if this the first call using this target. Note that this function is different from the common $.fn.loading wich start the plugin and return a chainable jQuery object. |
$('#my-loading-element').Loading() |
resize |
jQuery |
Recalculate and apply new dimensions and position to the overlay, based on the state of the target element. Call this method if the the overlay is not being shown on the right position and/or dimensions. |
$(...).loading('resize') |
start |
jQuery |
Turn on the loading state of some element and trigger the loading.start event. |
$(...).loading('start') |
stop |
jQuery |
Turn off the loading state of some element and trigger the loading.stop event. |
$(...).loading('stop') |
destroy |
jQuery |
Remove from DOM the overlay element. |
$(...).loading('destroy') |
toggle |
jQuery |
Turn on or off the loading state of some element, depending of the current state, and trigger the respective event. |
$(...).loading('toggle') |
$.Loading.setDefaults |
- |
Extend the Loading plugin default options |
$.Loading.setDefaults({ theme: 'blurred', ... }) |
