Skip to content

nFnK/jquery-fa-loading

Repository files navigation

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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published