loadingModal is a simple yet customizable jQuery loading indicator plugin which displays a fullscreen loading modal / overlay with more than 10 CSS3 powered loading spinners. Ideal for creating an use-friendly ‘busy’ loading screen over a specific element that is typically being called via AJAX requests.
Loading spinners included:
- rotatingPlane
- wave
- wanderingCubes
- spinner
- chasingDots
- threeBounce
- circle
- cubeGrid
- fadingCircle
- foldingCube
How to use it:
1. Put the main style sheet jquery.loadingModal.css in the header of the html page.
<link rel="stylesheet" href="css/jquery.loadingModal.css">
2. Put the jQuery library and the JavaScript file jquery.loadingModal.js at the end of the document.
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="js/jquery.loadingModal.js"></script>
3. Call the function on the target container where you want to display a fullscreen modal with default loading spinner and custom text message.
$('body').loadingModal({
text: 'Loading...'
});
4. Here are full options with default values to config the fullscreen loading modal.
$('body').loadingModal({
position: 'auto',
text: '',
color: '#fff',
opacity: '0.7',
backgroundColor: 'rgb(0,0,0)',
animation: 'doubleBounce'
});
5. Public methods.
// hide the loading modal
$('body').loadingModal('hide');
// destroy the plugin
$('body').loadingModal('destroy');