Add Quick Animation Preloader to your website using JQuery and CSS
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.
