Include these scripts at the top of your page in head section.

<script src="js/jquery.min.js"></script>
<script src="center-loader.js"></script>

Hover the box below to show hide loader.

$('#example_1').loader('show','<img style="height:35px; width:35px;" src="img/loader1.gif">');

Include font awesome css to use these loaders

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

$('#example_2').loader('show','<i class="fa fa-2x fa-spinner fa-spin"></i>');

$('#example_3').loader('show','<i class="fa fa-2x fa-circle-o-notch fa-spin"></i>');

$('#example_4').loader('show','<i class="fa fa-2x fa-refresh fa-spin"></i>');

$('#example_5').loader('show','<i class="fa fa-2x fa-cog fa-spin"></i>');

$('#example_6').loader('show','<i class="fa fa-2x fa-spinner fa-pulse"></i>');

$('#example').loader('hide');