Spinner (Italiano)

  function consultar(){jsShowWindowLoad("Cargando...");}function jsShowWindowLoad(mensaje) {//Metodo que se Ejecuta 2//creamos el div que bloquea grande------------------------------------------ var heads_var=document.getElementsByTagName("body"); var div = document.createElement("div"); div.id = "WindowLoad"; //$('body', body).append(div);//window.parent.document).append(div); //---->Lo agregamos al body pero principalheads_var.appendChild(div);//si no enviamos mensaje se pondra este por defecto if (mensaje === undefined) mensaje = "Procesando la información<br>Espere por favor"; //centrar imagen gif height = 20;//El div del titulo, para que se vea mas arriba (H) var ancho = 0; var alto = 0; //obtenemos el ancho y alto de la ventana de nuestro navegador, compatible con todos los navegadores if (window.innerWidth == undefined) ancho = window.screen.width; else ancho = window.innerWidth; if (window.innerHeight == undefined) alto = window.screen.height; else alto = window.innerHeight; //operación necesaria para centrar el div que muestra el mensaje var heightdivsito = alto/2 - parseInt(height)/2;//Se utiliza en el margen superior, para centrar //Aqui creamos el Spinner imgCentro = "<div style='text-align:center;height:" + alto + "px;'>"+"<div style='color:#000;margin-top:" + heightdivsito + "px; font-size:20px;font-weight:bold'>" +"</div>"+"<div class='load'>"+"<div class='gear one'>"+"<svg viewbox='0 0 100 100' fill='#94DDFF'>"+"<path d='M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z'></path>"+"</svg>"+"</div>"+"<div class='gear two'>"+"<svg viewbox='0 0 100 100' fill='#0093e1'>"+"<path d='M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z'></path>"+"</svg>"+"</div>"+"<div class='gear three'>"+"<svg viewbox='0 0 100 100' fill='#003f8e'>"+"<path d='M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z'></path>"+"</svg>"+"</div>"+"<div class='lil-circle'></div>"+"<svg class='blur-circle'>"+"<filter>"+"<fegaussianblur in='SourceGraphic' stddeviation='13'>"+"</fegaussianblur>"+"</filter>"+"<circle cx='70' cy='70' r='606' fill='transparent' stroke='#c8c8c8' stroke-width='40' filter='url(#blur)'>"+"</circle>"+"</svg>"+"</div>"+ mensaje +"</div>"; //creamos un input text para que el foco se plasme en este y el usuario no pueda escribir en nada de atras var input_var =document.getElementById("WindowLoad");var input = document.createElement("input"); input.id = "focusInput"; input.type = "text"//creamos el div que bloquea grande------------------------------------------ //asignamos el div que bloquea // $('#WindowLoad' , window.parent.document).append(input);input_var.appendChild(input);document.getElementById("focusInput").select(); document.getElementById("focusInput").style.visibility = "hidden"; document.getElementById("focusInput").style.display = "none"; //asignamos el foco y ocultamos el input text //$('#focusInput' , window.parent.document).focus(); //$('#focusInput' , window.parent.document).hide(); //centramos el div del texto //$('#WindowLoad' , window.parent.document).html(imgCentro);document.getElementById("WindowLoad").innerHTML = imgCentro;setTimeout(function(){ jsRemoveWindowLoad();/*document.getElementById("tipo_consultaIPB3").value="B";document.getElementById("tipo_operacion").value="cVarios";document.forms.target = "_self";document.forms.method = "post";<!-- document.forms.action="OperacionCBTFServlet?proceso=registro_beneficiarias_consulta_pr&operacion=registro_beneficiarias_consulta_op&accion=consultar"; -->document.forms.action="CONSULTA - MANTENIMIENTO DE CTAS_DATOS DE LA CTA_PAG 2.html";document.forms.submit();*/}, 6000);}//-----------------------------------------------------------------------//-----------------------------------------------------------------------//-----Funcion para el Spiner y el div que bloquea la pantalla//-----------------------------------------------------------------------function jsRemoveWindowLoad() {//Metodo que se ejecuta 3 // eliminamos el div que bloquea pantalla//$('#WindowLoad' , window.parent.document).removevar heads_var =document.getElementsByTagName("body");var input_var =document.getElementById("WindowLoad");heads_var.removeChild(input_var);}//-----------------------------------------------------------------------//-----------------------------------------------------------------------  
!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *