Small Loading Modal Overlay Plugin With jQuery - loadingBlock
File Size: | 38.9 KB |
---|---|
Views Total: | 11613 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.