Add Quick Animation Preloader to your website using JQuery and CSS

by Posted on

In this quick post I am going to show you how to Add Quick Animation Preloader to your website using JQuery and CSS. I found simple lightweight plugin on github named JmSpinner. JmSpinner is a light weight Jquery and Css preloader for your website. It adds Ajax loading or waiting animation to your website.
ajax-preloader


Add Quick Animation Preloader to your website using JQuery and CSS

Libraries

Include all the required libraries on page.

<!--CSS-->
<link href="jm.spinner.css" rel="stylesheet" type="text/css">
 
<!--JS-->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="jm.spinner.js"></script>

HTML

Added simple html container where preloader has to display.

<div class="preload" style="height:300px;"></div>



JS

Enable the loading indicator in a specific container.

<script>
$(function() {  
   $('.preload').jmspinner('small');  //large, small
});
</script>

Enable the loading indicator on whole page.

<script>
$(function() {  
   $('body').jmspinner('large'); //large, small
});
</script>

Remove the loading indicator when the ajax data is completely loaded.

<script>
$(function() {  
   $('.preload').jmspinner(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