Custom Loading Indicator Plugin with jQuery and Font Awesome - faloading

faloading is a jQuery plugin used for generating a custom loading overlay / indicator over a specific element while waiting for some data to be loaded. It uses Font Awesome 4 to render the loading spinners.

How to use it:

1. Add references to jQuery library and jquery.faloading.min.js to your webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="jquery.faloading-0.1.min.css">
<script src="jquery.faloading-0.1.min.js"></script>

2. The default CSS to style the plugin. Add the following CSS snippets into your existing CSS file.

.fa-loading-bg, .fa-loading-icon-wrapper {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%
}

.fa-loading-bg {
  top: 0;
  background: rgba(0,0,0,.6);
  z-index: 99999
}

.fa-loading-icon-wrapper {
  z-index: 999999;
  top: 50%;
  text-align: center
}

.fa-loading-icon {
  margin-top: -2.5em;
  font-size: 5em;
  color: #000
}

3. Display a fullscreen loading indicator on your webpage.

$("body").faLoading(); 

4. Display a loading indicator for a specific container element.

$("#container").faLoading(); 

5. Remove the loading indicator.

$("body").faLoadingStop();

6. Replace the loading spinner.

// default: fa-refresh
$("#container").faLoading('fa-spinner');

7. Default config options.

// undefined or true will add loading other can be "add", "remove" or "update",
type: undefined 

// creates an title bar,
title: undefined 

//  fa icon,
icon: "fa-refresh" 

// icon sppining,
spin: true 

// text message ( undefined or false for empty ),
status : "loading" 

// text message ( undefined or false for empty ),
text : false   

// timeout to close msg,
timeout : undefined 

// call back for when the message is closed (by timeout or x button(in case it ever gets one)),
closeCallback: undefined 

// adds and close button
closeButton: false 

Change log:

2016-03-23

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

2016-01-06

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

---

This awesome jQuery plugin is developed by alemonteiro. For more Advanced Usages, please check the demo page or visit the official website.