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

Change log:

2016-10-15

• Fix firefox, optimize colors

2016-09-28

• fixed for safari

---

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