jQuery Plugin To Add A Loading Overlay On Any Element Loading - Free Download jQuery Plugin To Add A Loading Overlay On Any Elements - Loading

Free Download jQuery Plugin To Add A Loading Overlay On Any Elements – Loading

Posted on

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.

jQuery Plugin To Add A Loading Overlay On Any Element Loading - Free Download jQuery Plugin To Add A Loading Overlay On Any Elements - Loading
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 jquery.loading.css, but you can
25  *  define your own. Just add a .loading-theme-my_awesome_theme selector
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 loading.start event
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 loading.stop event
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 loading.click event
79  */
80 onClick: function() {}

7. API methods.