Minimal Custom Loading Overlay Plugin For jQuery

A tiny custom loading overlay plugin created with jQuery.

We all want our users to have the best possible experience on our website. If you are developing a complex application with a lot of heavy content, it's easy for a user to get frustrated when they're watching something loading for an extended amount of time.

Using this plugin, you can apply a custom loading overlay to any DOM element (Div, Image, video, etc). This allows your user to continue interacting and engaging with the page while content is still loading in the background. And when it has loaded, you can easily remove it entirely.

How to use it:

1. Load the stylesheet loading-overlay.jquery.css and JavaScript loading-overlay.jquery.js in the document.

<link rel="stylesheet" href="/path/to/loading-overlay.jquery.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/loading-overlay.jquery.js"></script>

2. Apply the loading overlay to an element you specify.

<div class="example">
  ... any content here ...
</div>

3. Apply the loading overlay to an element you specify.

$('.example').loadingOverlay(true, {
  // options here
});

4. Set the background color of the loading overlay.

$('.example').loadingOverlay(true, {
  backgroundColor: 'rgba(255,255,255,0.85)',
});

5. Override the default loading indicator.

$('.example').loadingOverlay(true, {
  icon: '/path/to/loading/indicator/'
});

---

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