This time I will share jQuery Plugin and tutorial about jQuery Plugin To Add A Loading Overlay On Any Elements – Loading, hope it will help you in programming stack.
File Size: | 113 KB |
---|---|
Views Total: | 9364 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Loading is a small jQuery plugin that allows you to create an animated overlay covering any Html elements to indicate the loading status. Great for content preloader or dynamic content loaded via Ajax.
Basic Usage:
1. Include the jQuery loading.js after jQuery javascript library.
1 |
< script src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></ script > |
2 |
< script src = "src/loading.js" ></ script > |
2. Create an element for the loading overlay.
1 |
< div id = "demo" class = "loading-div" > |
2 |
This div is always loading |
3 |
</ div > |
3. The CSS styles for the loading overlay content.
1 |
.loading-overlay-content { |
2 |
text-transform : uppercase ; |
3 |
letter-spacing : 0.4em ; |
4 |
font-size : 1.15em ; |
5 |
font-weight : bold ; |
6 |
} |
4. Customizable styles for the loading overlay. You can easily add your own themes in the CSS as follows.
01 |
.loading-overlay.loading-theme-dark { |
02 |
background-color : #000 ; |
03 |
color : #fff ; |
04 |
} |
05 |
06 |
.loading-overlay.loading-theme-light { |
07 |
background-color : #fff ; |
08 |
color : #000 ; |
09 |
} |
10 |
11 |
.loading-overlay.loading-theme- green { |
12 |
background-color : #2ecc71 ; |
13 |
color : #fff ; |
14 |
} |
4. Set the height & width for the loading overlay.
1 |
.loading-div { |
2 |
height : 180px ; |
3 |
padding : 15px 25px ; |
4 |
color : #eee ; |
5 |
} |
5. Initialize the plugin with one JS call.
1 |
$( '#loading-always' ).loading(); |
6. All the options and callback functions.
01 |
/** |
02 |
* jQuery element to be used as overlay |
03 |
* If not defined, a default overlay will be created |
04 |
*/ |
05 |
overlay: undefined, |
06 |
07 |
/** |
08 |
* z-index to be used by the default overlay |
09 |
* If not defined, a z-index will be calculated based on the |
10 |
* target's z-index |
11 |
* Has no effect if a custom overlay is defined |
12 |
*/ |
13 |
zIndex: undefined, |
14 |
15 |
/** |
16 |
* Message to be rendered on the overlay content |
17 |
* Has no effect if a custom overlay is defined |
18 |
*/ |
19 |
message: "Loading..." , |
20 |
21 |
/** |
22 |
* Theme to be applied on the loading element |
23 |
* |
24 |
* Some default themes are implemented on |
25 |
* define your own. Just add a |
26 |
* somewhere with your custom styles and change this option |
27 |
* to 'my_awesome_theme'. The class is applied to the parent overlay div |
28 |
* |
29 |
* Has no effect if a custom overlay is defined |
30 |
*/ |
31 |
theme: "light" , |
32 |
33 |
/** |
34 |
* Class(es) to be applied to the overlay element when the loading state is started |
35 |
*/ |
36 |
shownClass: "loading-shown" , |
37 |
38 |
/** |
39 |
* Class(es) to be applied to the overlay element when the loading state is stopped |
40 |
*/ |
41 |
hiddenClass: "loading-hidden" , |
42 |
43 |
/** |
44 |
* Set to true to stop the loading state if the overlay is clicked |
45 |
* This options does NOT override the onClick event |
46 |
*/ |
47 |
stoppable: false , |
48 |
49 |
/** |
50 |
* Set to false to not start the loading state when initialized |
51 |
*/ |
52 |
start: true , |
53 |
54 |
/** |
55 |
* Function to be executed when the loading state is started |
56 |
* Receives the loading object as parameter |
57 |
* |
58 |
* The function is attached to the |
59 |
*/ |
60 |
onStart: function (loading) { |
61 |
loading.overlay.fadeIn(150); |
62 |
}, |
63 |
64 |
/** |
65 |
* Function to be executed when the loading state is stopped |
66 |
* Receives the loading object as parameter |
67 |
* |
68 |
* The function is attached to the |
69 |
*/ |
70 |
onStop: function (loading) { |
71 |
loading.overlay.fadeOut(150); |
72 |
}, |
73 |
74 |
/** |
75 |
* Function to be executed when the overlay is clicked |
76 |
* Receives the loading object as parameter |
77 |
* |
78 |
* The function is attached to the |
79 |
*/ |
80 |
onClick: function () {} |
7. API methods.
- resize: 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.
- start: Turn on the loading state of some element.
- stop: Turn off the loading state of some element.
- toggle: Turn on or off the loading state of some element, depending of the current state.
- options: Change some element’s loading options at runtime.
Powerful jQuery Form Validation Plugin – Validation Engine,
”
source : jquery.net