Esta publicación servirá para ir colocando fragmentos de consultas que en algún momento me fueron útiles para usarlo en MongoDB Fragmento 1: Se requería obtener todos los elementos que dentro de un atributo que es de tipo array(arreglo) coincida con type:"fire" Fragmento 2: Se requería actualizar el atributo " lastUpdate " de toda la colección donde la edad sea mayor o igual a 15.
Bien (Lo que pasa es de que) esta vez traigo un ejemplo sencillo donde muestro la forma de colocar una imagen loader mientras carga nuestra pagina utilizando jquery , el ejemplo es muy sencillo por lo que no sera tan dificil poder realizarlo, yo hice mas o menos esto:
coloco dentro de la etiqueta head
<link rel="stylesheet" href="estilo.css" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
En estilo tengo lo siguiente:
<label id="texto"></label>
<div id="divProgreso" class="loadingAll" align="center" >
<img src="loading.gif" style="position: relative; top: 50%;"></img>
<div style="color: red; position: relative; top: 5%; " align="center">
Se está cargando la pagina... Espere por favor.
</div>
</div>
Despues en head coloco el javascript:
jQuery(document).ready(function(){
//imagen precarga
$("#divProgreso").css("display" , "block");
$("#texto").text("Cargando...");
});
//Coloque 9 segundos para que se vea el efecto este lo pueden colocar a su consideracion
$(window).load(function(){
//Quita imagen precarga
setTimeout(function(){
$("#divProgreso").css("display","none");
$("#texto").text("Finalizado...");
},9000);
});
y Listo esto debe fucionar maso o menos asi(por si solo quieren hacer el copy paste):
<!DOCTYPE html>
<html>
<head>
<title>Conexion Banorte - Flujo a central</title>
<link rel="stylesheet" href="estilo.css" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function(){
//imagen precarga
$("#divProgreso").css("display" , "block");
$("#texto").text("Cargando...");
});
$(window).load(function(){
//Quita imagen precarga
setTimeout(function(){
$("#divProgreso").css("display","none");
$("#texto").text("Finalizado...");
},9000);
});
</script>
</head>
<body>
<label id="texto"></label>
<div id="divProgreso" class="loadingAll" align="center" >
<img src="loading.gif" style="position: relative; top: 50%;"></img>
<div style="color: red; position: relative; top: 5%; " align="center">
Se está cargando la pagina... Espere por favor.
</div>
</div>
</body>
</html>
haaaa. esta es la imagen
Saludos..
coloco dentro de la etiqueta head
<link rel="stylesheet" href="estilo.css" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
En estilo tengo lo siguiente:
/*Precarga*/Dentro del body pongo esto:
.loadingAll {
display: none;
z-index: 1;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: white;
filter: alpha(opacity=75);
opacity: 0.75;
}
<label id="texto"></label>
<div id="divProgreso" class="loadingAll" align="center" >
<img src="loading.gif" style="position: relative; top: 50%;"></img>
<div style="color: red; position: relative; top: 5%; " align="center">
Se está cargando la pagina... Espere por favor.
</div>
</div>
Despues en head coloco el javascript:
jQuery(document).ready(function(){
//imagen precarga
$("#divProgreso").css("display" , "block");
$("#texto").text("Cargando...");
});
//Coloque 9 segundos para que se vea el efecto este lo pueden colocar a su consideracion
$(window).load(function(){
//Quita imagen precarga
setTimeout(function(){
$("#divProgreso").css("display","none");
$("#texto").text("Finalizado...");
},9000);
});
y Listo esto debe fucionar maso o menos asi(por si solo quieren hacer el copy paste):
<!DOCTYPE html>
<html>
<head>
<title>Conexion Banorte - Flujo a central</title>
<link rel="stylesheet" href="estilo.css" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function(){
//imagen precarga
$("#divProgreso").css("display" , "block");
$("#texto").text("Cargando...");
});
$(window).load(function(){
//Quita imagen precarga
setTimeout(function(){
$("#divProgreso").css("display","none");
$("#texto").text("Finalizado...");
},9000);
});
</script>
</head>
<body>
<label id="texto"></label>
<div id="divProgreso" class="loadingAll" align="center" >
<img src="loading.gif" style="position: relative; top: 50%;"></img>
<div style="color: red; position: relative; top: 5%; " align="center">
Se está cargando la pagina... Espere por favor.
</div>
</div>
</body>
</html>
haaaa. esta es la imagen
Saludos..
Comentarios
Publicar un comentario