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