How to display loading animation on div container using jquery

Showing a loading indicator on startup is a common approach in native applications that is becoming more common on the web. If you need to load a lot of resources when your web application is first loaded, you must give the user a clear indication that this is something under processing by showing loading animation. That’s why in this post i am going to introduce awesome jquery plugin – jquery.preloader to display loading animation on div container.

It is a small jQuery plug-in is designed for display loading animation when some process is running just by selecting any container. The plugin has the methods and options for easy controlling the displaying.Plugin includes SCSS where determines basic styles of blocks, animation, etc.

Integrate loading animation on div container

Libraries

Plugin dependent on jquery library so first include jquery latest library after that add jquery.preloader CSS+JS libraries on page.

<!--CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
 integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="preloader.css"/>
 
<!--JS -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.preloader.min.js"></script>

<div class="loadingBlock"></div>

<script>
$(function() {   
 $('.loadingBlock').preloader();
});
</script>

<script>
$(function() {   
 $('.loadingBlock').preloader({
  // loading text
  text: '', 
 
  // from 0 to 100 
  percent: '', 
 
  // duration in ms
  duration: '', 
 
  // z-index property
  zIndex: '', 
 
  // sets relative position to preloader's parent
  setRelative: false 
 });
});
</script>