How to display loading animation on div container using jquery

by Posted on

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.
display-loading-animation-jquery

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>

HTML

Created simple div container where loading will display.

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



JS

Call the jquery.preloader jquery function on page to display loading animation on div container.

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

You can also pass some custom option in above function to customize your loading preview.

<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>

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates.Don’t forget to read license for using above plugin in your commercial project.



Published by admin