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

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -