javascript - how to use multiple preloaders in a same page for different actions? -
i trying use multiple preloaders can loaded in particular area of page instead of loading whole page , during occurrence of different events button click.
the code used is:
html
<style> .preload div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #3c3d3f url('../images/loading.gif') no-repeat center center; } </style> <div class="preload"> <div id="preloader"> </div> </div>
js
jquery(document).ready(function($) { $(window).load(function(){ $('#preloader').fadeout('slow',function(){ $(this).remove(); }); }); });
you can modifying css.
.preload div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background-color: #3c3d3f; background-repeat:no-repeat; background-position:center center; } .preload div#preloader.type1 { background-image:url("img-one.gif"); } .preload div#preloader.type2 { background-image:url("img-two.gif"); } .preload div#preloader.type3 { background-image:url("img-three.gif"); }
here, type1,type2,type3
different classes can add/remove based on event. should have mapping of class , event can toggle classes.
Comments
Post a Comment