Custom Loading Modal With jQuery And Font Awesome Icons - fa-loading

fa-loading is a jQuery plugin for creating customizable loading modal windows that use Font Awesome icons as loading spinners.

Features:

• Custom loading title & loading text.
• Supports any container elements and even the whole body.
• Close button with callback.
• 3 loading status: loading, fail and success.
• Auto dismiss after a timeout.

How to use it:

1. Load the needed jQuery library and Font Awesome iconic font in the html file.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

2. Load the jQuery fa-loading plugin's files in the html file.

<link rel="stylesheet" href="jquery.faloading.css">
<script src="jquery.faloading.js"></script>

3. Call the function on the target container and specify the icon name you wan to use.

$(".el").faLoading('fa-cog');

4. Customize the loading modal with the following options.

$(".el").faLoading({

  // 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 

});

5. You can also setup the loading modal with the following JavaScript syntax.

$(".el").faLoading(loadType, icon, status, spin, message, title, timeout, closeCallBack, closeButton);

6. Default status setups.

default_setups = {
  'fail':  {
    type: "update",
    icon: "fa-exclamation-triangle",
    spin: false,
    status: "fail",
    text: undefined,
    title: undefined,
    timeout: 6000,
    closeButton: true
  },
  'success': {
    type: "update",
    icon: "fa-check-circle",
    spin: false,
    status: "success",
    text: undefined,
    title: undefined,
    timeout:  6000,
    closeButton: true
  },
  'loading': {
    type: "update",
    icon: "fa-check-circle",
    spin: false,
    status: "success",
    text: undefined,
    title: undefined,
    timeout:  6000,
    closeButton: true
  }
};

---

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