jQuery & Font Awesome Modal Loading

Simple jQuery plugin to add modal loading using Font Awesome spin icons.

Any of the Font Awesome icons can be used: https://fortawesome.github.io/Font-Awesome/icons/#spinner

Very simple and ugly demo page: http://alemonteiro.com.br/demos/fa-loading

Usage

	var $el = $("body"); // or any relative, absolut or fixed positioned element 	 	// Add default loading 	$el.faLoading();  	// Add with options or update 	$el.faLoading(/*object*/options); // See list bellow  	// Remove loading 	$el.faLoading(false); 	// or 	$el.faLoading('remove'); 	 	// Setting the loading icon 	$el.faLoading('fa-spinner'); 	 	// To Update the Loading to a Succesfull or Failed status 	$el.faLoading("fail", "Message", "Title"); 	$el.faLoading("success", "Message", "Title");  	// To change the default icon for all loadings 	$.faLoadingDefaultIcon = 'fa-cog'; 	 

Options

var _defaults = { 	type: undefined  		// type undefined/true/"add" will add loading  		// type false/"remove" will remove loading 		// type "update" will update settings 	, title: undefined // creates an title bar 	, icon: "fa-refresh" //  fa icon 	, spin: false // icon sppining 	, status : "loading" // css status class ( css styles are based here ) 	, text : false   // text message ( undefined or false for empty ) 	, timeout : undefined // timeout to close msg 	, closeCallback: undefined // call back for when the message is closed (by timeout or x button(in case it ever gets one)) 	, closeButton: false // adds and close button } 

CSS Customization

To change background and icon color you can override those css rules

.fa-loading-bg  {     background: rgba(0, 0, 0, 0.6); // modal background } .fa-loading-icon-wrapper .fa-loading-icon {     color: #000; // icon color 	font-size: 5em; // icon size  	margin-top: -2.5em; // must be -50% of the font-size so it'll be always vertically centered } 

Notes

It only works for elements that have relative, absolute, fixed or sticky positioning.

Browser Compatibility

Tested ok on Firefox 45, Chrome 47 and Internet Explorer 11

Changelog

V 0.3 - 18/03/2016

Added updated method Added default 'success' and 'fail' default updates Added title property 

V 0.2 - 06/01/2016

Removed unnecessary methods and focused "all" functionality on 'faLoading' for better jQuery standarts