Custom Loading Indicator Plugin with jQuery and Font Awesome - faloading

Custom Loading Indicator Plugin with jQuery and Font Awesome - faloading
File Size: 7.37 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.