Hola a todos.
El punto 4 no lo entendí mucho, pero interpreto como que, si ya hice el "cancel" a la mitad de la carga de la pagina, debo dejar pintado al medio de la pagina la imagen "loader" para indicar que la cancele?.
Que se estila hacer entonces?,
1- inicio la carga de una pagina web que generará mas de 50 paginas, doy cancelar en
el navegador a la mitad de la carga (aprox).
2- pinto una imagen "loader con div".
3- cancelo la carga a la mitad
4- oculto la imagen O, la dejo pintada al medio de la pagina?, que se hace entonces?
-----------------------------------------------------------------------------------------------------
código de mi pagina, favor obviar que la lógica de negocio (query) está en la pagina, es solo a modo de ejemplo, lo mismo para el estilo.
-----------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-0lax{text-align:left;vertical-align:top}
/*-----------------------------------------------*/
body {
margin: 0;
padding: 0;
}
.container {
position: absolute;
top:46%;
left:48%;
width: 120px;
height: 150px;
position:fixed; /* necesita informacion de ancho*/
background: rgba(0, 0, 0, 0.9);
border: 1px solid white;
padding: 10px 0 10px 0;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: -1px -1px 12px 14px rgba(0,0,0,0.75);
-moz-box-shadow: -1px -1px 12px 14px rgba(0,0,0,0.75);
box-shadow: -1px -1px 12px 14px rgba(0,0,0,0.75);
z-index: 100;
}
.datos {
z-index: -100;
}
.ball {
width: 10px;
height: 10px;
margin: 10px auto;
border-radius: 50px;
}
.ball:nth-child(1) {
background: red;
-webkit-animation: right 1s infinite ease-in-out;
-moz-animation: right 1s infinite ease-in-out;
animation: right 1s infinite ease-in-out;
}
.ball:nth-child(2) {
background: red;
-webkit-animation: left 1.1s infinite ease-in-out;
-moz-animation: left 1.1s infinite ease-in-out;
animation: left 1.1s infinite ease-in-out;
}
.ball:nth-child(3) {
background: red;
-webkit-animation: right 1.05s infinite ease-in-out;
-moz-animation: right 1.05s infinite ease-in-out;
animation: right 1.05s infinite ease-in-out;
}
.ball:nth-child(4) {
background: red;
-webkit-animation: left 1.15s infinite ease-in-out;
-moz-animation: left 1.15s infinite ease-in-out;
animation: left 1.15s infinite ease-in-out;
}
.ball:nth-child(5) {
background: red;
-webkit-animation: right 1.1s infinite ease-in-out;
-moz-animation: right 1.1s infinite ease-in-out;
animation: right 1.1s infinite ease-in-out;
}
.ball:nth-child(6) {
background: red;
-webkit-animation: left 1.05s infinite ease-in-out;
-moz-animation: left 1.05s infinite ease-in-out;
animation: left 1.05s infinite ease-in-out;
}
.ball:nth-child(7) {
background: red;
-webkit-animation: right 1s infinite ease-in-out;
-moz-animation: right 1s infinite ease-in-out;
animation: right 1s infinite ease-in-out;
}
@-webkit-keyframes right {
0% {
-webkit-transform: translate(-15px);
}
50% {
-webkit-transform: translate(15px);
}
100% {
-webkit-transform: translate(-15px);
}
}
@-webkit-keyframes left {
0% {
-webkit-transform: translate(15px);
}
50% {
-webkit-transform: translate(-15px);
}
100% {
-webkit-transform: translate(15px);
}
}
@-moz-keyframes right {
0% {
-moz-transform: translate(-15px);
}
50% {
-moz-transform: translate(15px);
}
100% {
-moz-transform: translate(-15px);
}
}
@-moz-keyframes left {
0% {
-moz-transform: translate(15px);
}
50% {
-moz-transform: translate(-15px);
}
100% {
-moz-transform: translate(15px);
}
}
@keyframes right {
0% {
transform: translate(-15px);
}
50% {
transform: translate(15px);
}
100% {
transform: translate(-15px);
}
}
@keyframes left {
0% {
transform: translate(15px);
}
50% {
transform: translate(-15px);
}
100% {
transform: translate(15px);
}
}
/*-----------------------------------------------*/
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$( window ).on( "load", function() {
console.log( "2 - Ha ocurrido window.load: ventana lista" );
var el = document.getElementById("container");
el.style.display = 'none';
});
</script>
</head>
<body>
<div class="container" id="container">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
<div class="datos">
<script language="JavaScript">
var Digital=new Date();
var hours=Digital.getHours();
var minutes=Digital.getMinutes();
var seconds=Digital.getSeconds();
document.write('hora:'+ hours+':'+minutes+':'+seconds);
</script>
<cfquery name="pol" datasource="my_datasource">
select c_sequen secuencia, product producto, policy poliza, proposal propuesta
from cu_datosbasicos
where rownum < 5001
</cfquery>
<cfset i=0>
<table class="tg">
<tr>
<th class="tg-0lax">ID</th>
<th class="tg-0lax">SECUENCIA</th>
<th class="tg-0lax">PRODUCTO</th>
<th class="tg-0lax">POLIZA</th>
<th class="tg-0lax">PROPUESTA</th>
</tr>
<cfoutput query="pol">
<cfset i=i+1>
<tr>
<th class="tg-0lax">#i#</th>
<th class="tg-0lax">#pol.secuencia#</th>
<th class="tg-0lax">#pol.producto#</th>
<th class="tg-0lax">#pol.poliza#</th>
<th class="tg-0lax">#pol.propuesta#</th>
<th class="tg-0lax">#pol.secuencia#</th>
<th class="tg-0lax">#pol.producto#</th>
<th class="tg-0lax">#pol.poliza#</th>
<th class="tg-0lax">#pol.propuesta#</th>
<th class="tg-0lax">#pol.secuencia#</th>
<th class="tg-0lax">#pol.producto#</th>
<th class="tg-0lax">#pol.poliza#</th>
<th class="tg-0lax">#pol.propuesta#</th>
<th class="tg-0lax">#pol.secuencia#</th>
<th class="tg-0lax">#pol.producto#</th>
<th class="tg-0lax">#pol.poliza#</th>
<th class="tg-0lax">#pol.propuesta#</th>
<th class="tg-0lax">#pol.secuencia#</th>
<th class="tg-0lax">#pol.producto#</th>
<th class="tg-0lax">#pol.poliza#</th>
<th class="tg-0lax">#pol.propuesta#</th>
</tr>
</cfoutput>
</table>
</div>
</body>
</html>