Custom Loading Indicator On Desired DOM Element - jQuery LoadingView

LoadingView is a dead simple jQuery loading indicator plugin which displays a custom loading spinner on a given element while waiting for some content to be loaded.

See also:

• 10 Best Loading Spinner & Indicator jQuery Plugins
• 10 Best Loading Spinner/Indicator JavaScript & CSS Libraries
• 80+ Best Pure CSS Loading Spinners For Front-end Developers

How to use it:

1. Just include the JavaScript file loadingView.js after jQuery library and you're ready to go.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="loadingView.js"></script>

2. Display the default loading spinner on an element you specify.

<div id="demo">
  Dynamic Content Here
</div>

$(document).loadingView('.box');

// or
$(function(){
  $('.box').loadingView({
    'state': true
  });
});

3. Customize the spinner image you want to use. 

$(function(){
  $('.box').loadingView({
    'image': "loadingImage.gif",
    'imageClassName': "loadingImage"
  });
});

4. Make the loading spinner always be center in the container.

$(function(){
  $('.box').loadingView({
    'imageStyle': ""position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);""
  });
});

5. Hide the loading indicator manually.

$(function(){
  $('.box').loadingView({
    'state': false
  });
});

---

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