Small Loading Modal Overlay Plugin With jQuery - loadingBlock

The jQuery loadingBlock plugin allows you to create a modal-like ajax loading overlay with custom loading indicator and text. Fully customizable via CSS during init.

How to use it:

1. Include the slim build of jQuery library and the jQuery loadingBlock plugin's JavaScript file on the html page.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="jquery.loading.block.js"></script>

2. The JavaScript to show a default loading overlay on the screen.

$.loadingBlockShow();

3. The JavaScript to hide the loading overlay.

$.loadingBlockHide

4. Use a custom loading spinner.

$.loadingBlockShow({
  imgPath: 'loader.gif',
  imgStyle: {
    width: 'auto',
    textAlign: 'center',
    marginTop: '20%'
  },
});

5. Set the text message when loading.

$.loadingBlockShow({
  text: 'loading...'
});

6. Customize the fullscreen loading overlay.

$.loadingBlockShow({
  style: {
    position: 'fixed',
    width: '100%',
    height: '100%',
    background: 'rgba(255, 255, 255, .8)',
    left: 0,
    top: 0,
    zIndex: 10000
  }
});

---

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