JS Tutorial
- Overview
- Documents
Features
- Shows a loading overlay on the whole page or over single DOM elements
- Tracks a counter to allow multiple calls on single target
- Can auto resize according to its container (very useful if used over a DOM element being filled meanwhile)
- Compatible with Font Awesome
- Can show a custom element to provide feedback to the user
- Completely configurable
- No external CSS, small footprint
Source: gasparesganga.com
1. INCLUDE CSS AND JS FILES
<link type="text/css" rel="stylesheet" href="font-awesome-fa.css"> <script type="text/javascript" src="jquery-3.1.0.min.js"></script> <script type="text/javascript" src="loadingoverlay.min.js"></script>
2. HTML
<button id="example1">Whole page Overlay</button>
3. JAVASCRIPT
$("#example1").on("click", function(event){
$.LoadingOverlay("show");
setTimeout(function(){
$.LoadingOverlay("hide");
}, 3000);
});
4. OPTIONS
color : "rgba(255, 255, 255, 0.8)" // String custom : "" // String/DOM Element/jQuery Object fade : true // Boolean/Integer/String/Array fontawesome : "" // String image : "data:image/gif;base64,..." // String imagePosition : "center center" // String maxSize : "100px" // Integer/String minSize : "20px" // Integer/String resizeInterval : 50 // Integer size : "50%" // Integer/String zIndex : undefined // Integer
color: CSS background-color property. Use rgba() to set the opacity.
custom: A DOM element, jQuery object or plain HTML to append to the LoadingOverlay. You can use this feature to display some feedback for your user.
Use an empty string "" or false to disable the feature.
fade: Controls the fade in and fade out durations. It can be either 0 or false to disable it (meaning a zero duration), an integer or string to set equal fade in and fade out durations (ie. 400 or "fast" or "slow") or a two-elements array to set specific fade in and fade out durations(ie. [600, 300]). You can also pass the boolean value true, which is treated like [400, 200].
fontawesome: Class(es) of the Font Awesome icon to use. Note that you must include the Font Awesome stylesheet in your project if you wish to use this feature. Use an empty string "" or false to disable the feature.
image: URL of the image to show. Use an empty string "" or false to show no image.
imagePosition: This option is mapped directly to CSS background-position property to customize the position of the image.
maxSize: Maximun size of image in pixels. Set it to 0 or false for no limit.
minSize: Minimun size of image in pixels. Set it to 0 or false for no limit.
resizeInterval: Specifies an interval in milliseconds to resize and reposition the LoadingOverlay according to its container. This is useful when the container element changes size and/or position while the LoadingOverlay is being shown.
Set it to 0 or false to disable this feature.
size: Size of image in percentage. Use 0 or false to disable image resizing.
zIndex: Use this to explicitly set a z-index for the overlay.
5. METHODS
There are three different methods, one to attach a LoadingOverlay to the body and thus covering the whole page, another to attach it to a single DOM element or a set of DOM elements and the last one to set the default parameters.
$.LoadingOverlay(action [,options])
Shows the LoadingOverlay with a fixed position, covering the whole page. Optionally pass some options to it.
This method doesn’t return anything.
$(selector).LoadingOverlay(action [,options])
Attach the LoadingOverlay to a single DOM element or a set of DOM elements. Optionally pass some options to it.
This method returns a jQuery object or a set of jQuery objects (depending on the selector used) and is chainable.
$.LoadingOverlaySetup(options)
Set default options for all future calls to $.LoadingOverlay() and $(selector).LoadingOverlay().
6. ACTIONS
The $.LoadingOverlay() and $(selector).LoadingOverlay() methods have two variants, corresponding to two Actions:
Show
$[(selector)].LoadingOverlay("show" [,options])
Shows a LoadingOverlay, or increases the counter if it’s already shown. Optionally you can pass a set of options, but note that they only take effect if the LoadingOverlay is not shown yet on the element.
Hide
$[(selector)].LoadingOverlay("hide" [,force])
Hides the LoadingOverlay or decreases the counter if it’s more than 1. You can optionally pass a boolean parameter force to hide the LoadingOverlay even if the counter hasn’t reached 0.
