Small Loading Modal Overlay Plugin With jQuery - loadingBlock

File Size: 38.9 KB
Views Total: 11491
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="jquery.loading.block.js"></script>

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


3. The JavaScript to hide the loading overlay.


4. Use a custom loading spinner.

  imgPath: 'loader.gif',
  imgStyle: {
    width: 'auto',
    textAlign: 'center',
    marginTop: '20%'

5. Set the text message when loading.

  text: 'loading...'

6. Customize the fullscreen loading overlay.

  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.