public
Last active

Add and remove loading animation to ajax calls (jQuery)

  • Download Gist
tinyfly.loading.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
// This code depends on jQuery
 
//create 1 global variable for namespacing purposes.
if (typeof tinyfly === 'undefined') {
tinyfly = {};
}
 
/* Handles adding and removing loading animations for ajax calls */
tinyfly.loading = (function($) {
var defaults = {},
add, remove;
// default options
defaults = {
size: 'large',
position: 'inside',
display: 'inline',
timeout: 100
};
/*
Function: add
Adds loading animation markup into the DOM. Typically called on AJAX beforeSend.
Parameters:
(object) $el - jQuery object of the element that you want to insert the markup beside or into.
(object) options - The optional configuration settings.
(string) options.size {large, small} - determines the size of the animated gif spinner.
(string) options.position {before, after, inside} - Determines the jQuery insertion method.
(integer) options.timeout - number of miliseconds to wait before showing the spinner.
*/
add = function($el, options) {
var settings = $.extend(defaults, options),
$markup, insertMarkup;
$markup = $('<span class="loader">loading&hellip;</span>')
.addClass(settings.size + ' ' + settings.position + ' ' + settings.display);
insertMarkup = function () {
//decide which DOM insertion to use
switch (settings.position) {
case 'before':
$el.before($markup);
break;
case 'after':
$el.after($markup);
break;
case 'inside':
default:
$el.prepend($markup);
}
 
//add timerId to the data blob so we can cancel it if the ajax call is quick
$el.data('loading').timerId = settings.timerId;
};
//only show the loading animation if the ajax call takes longer the specified miliseconds
settings.timerId = window.setTimeout(insertMarkup, settings.timeout);
$el.data('loading', settings);
};
/*
Function: remove
Removes the markup inserted by the add function. Typically called on AJAX Complete.
Parameters:
(object) $el - jQuery object of the element on which to start DOM traversal
and find the loading animation markup to remove
See Also:
<add>
*/
remove = function($el) {
var settings = $el.data('loading'),
selector = 'span.loader',
$span;
//check if there is a timer, if so clear it so the spinner
//doesn't get added after the page has loaded
if (settings.timerId) {
window.clearTimeout(settings.timerId);
}
//decide which DOM traversal to use
switch (settings.position) {
case 'before':
$span = $el.prev(selector)
break;
case 'after':
$span = $el.next(selector)
break;
case 'inside':
default:
$span = $el.children(selector)
}
$el.removeData('loading');
$span.remove();
};
//public methods
return {
add: add,
remove: remove
}
})(jQuery);

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.