Minimalist Loading Overlay Plugin For jQuery - LoadingBox

LoadingBox is a really simple jQuery plugin used to generate a customizable loading overlay with a custom GIF based loading spinner on the whole page. Help for creating a loading indicator while data in the webpage is loading.

How to use it:

1. Add the jQuery LoadingBox plugin after you've added jQuery library:

<script src="//code.jquery.com/jquery.min.js"></script>
<script  src="jquery.LoadingBox.js"></script>

2. Create a new loading box covering the whole page.

var lb = new $.LoadingBox();

3. Close the loading box after 2 seconds.

setTimeout(function(){
  lb.close();
}, 1000);

4. Customize the loading box with the following options:

var lb = new $.LoadingBox({

    // if the element doesn't exist, it will create a one new with the predefined html structure and css
    mainElementID: 'loading-box', 

    // animation speed
    fadeInSpeed: 'normal',
    fadeOutSpeed: 'normal',

    // opacity
    opacity: 0.8,

    // background color
    backgroundColor: "#000",

    // width / height of the loading GIF
    loadingImageWitdth: "60px",
    loadingImageHeigth: "60px",

    // path to the loading gif
    loadingImageSrc: ""
    
});

---

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