loading

[satjaen]

Iniciado por misael_winne

primero cree un estilo
<style type="text/css">
#loading{
color:#116D92;
background:#fff;
text-align:center;
line-height:40px;
border-radius:10px;
box-shadow:0 0px 5px #303030;
z-index:999;
width:300px;
height:80px;
position:absolute;
left:50%;
top:25%;
margin:-100px 0 0 -150px;
}
#cont-loading{
width:100%;
height:200%;
background:rgba(0,0,0,0.5);
position:absolute;
top:0;
left:0;
z-index:999
}
</style>

despues cree una funcion llamada cargar

Código Javascript:

function cargar(){
            $("#loading").show();
        }
 

despues lo culto con un div

Código HTML:

<div id="cont-loading"><div id="loading" style="">Cargando Informaci&oacute;n<br><img src="loading.gif" /></div></div>
 

y lo mando llamar en mi link

Código HTML:

<a href="actividades.php?aid=<?php echo $tienda['tienda_id']; ?>" onclick="javascript:cargar()" class="first"><div class="actividades">Actividades</div></a>
 

Hola, pon esto entre el head de tu página a ver si te vale:

Código Javascript:

<script type="text/javascript">
    $(document).ready(function(){ 
    window.onload=cerrar; 
    function cerrar(){ 
    $("#carga").animate({"opacity":"0"},2000,function(){$("#carga").css("display","none");}); 
            } 
    $("#carga").click(function(){cerrar();}); 
          });
    </script> 
<div title="Click para Cerrar" id="carga" style="cursor:pointer;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;box-shadow:inset yellow 0px 0px 14px;background-image:url(http://www.puntroma.com/img/ico_cargando.gif);background-position:center;background-size:100%;background-color:#111111;width:300px;color:#fff;text-align:center;height:100px;padding:52px 12px 12px 12px;position:fixed;top:30%;left:40%;z-index:6;">Cargando...</div>
 

Saludos