Add Quick Animation Preloader to your website using JQuery and CSS

0 377

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.

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.

Leave A Reply

Your email address will not be published.