Fullscreen Loading Modal / Indicator Plugin For jQuery – loadingModal

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');

 Demo / Download