Home Explore Help
Sign In
tati
/
especificosweb
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

spinner

David 10 years ago
parent
ccaf0f6185
commit
ded0d114eb
4 changed files with 132 additions and 3 deletions
Split View Show Diff Stats
  1. 3 0
      back/generate_hash.php
  2. 2 2
      css/formulario.css
  3. 119 0
      css/spinner.css
  4. 8 1
      formulario.html

+ 3 - 0
back/generate_hash.php
View File 

@@ -0,0 +1,3 @@
 
+<?php
 
+select sha1(concat(id,floor(UNIX_TIMESTAMP()*rand()),mail)) from mails_datos where mail="davidventura27@gmail.com";
 
+?>

+ 2 - 2
css/formulario.css
View File 

@@ -31,7 +31,7 @@ html, body
 
 }
 
 
 .max-top-space{
 
-    margin-top: 100px;
 
+    margin-top: 50px;
 
 }
 
 
 .promocion {
 
@@ -39,7 +39,7 @@ html, body
 
     background-size: cover;
 
     color: #FFF;
 
 	font-weight:700;
 
-    padding-bottom: 5rem;
 
+    padding-bottom: 1rem;
 
 }
 
 
 input[type='number'] {

+ 119 - 0
css/spinner.css
View File 

@@ -0,0 +1,119 @@
 
+/* Absolute Center Spinner */
 
+.loading {
 
+  position: fixed;
 
+  z-index: 999;
 
+  height: 2em;
 
+  width: 2em;
 
+  overflow: show;
 
+  margin: auto;
 
+  top: 0;
 
+  left: 0;
 
+  bottom: 0;
 
+  right: 0;
 
+}
 
+
 
+/* Transparent Overlay */
 
+.loading:before {
 
+  content: '';
 
+  display: block;
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+  background-color: rgba(0,0,0,0.3);
 
+}
 
+
 
+/* :not(:required) hides these rules from IE9 and below */
 
+.loading:not(:required) {
 
+  /* hide "loading..." text */
 
+  font: 0/0 a;
 
+  color: transparent;
 
+  text-shadow: none;
 
+  background-color: transparent;
 
+  border: 0;
 
+}
 
+
 
+.loading:not(:required):after {
 
+  content: '';
 
+  display: block;
 
+  font-size: 10px;
 
+  width: 1em;
 
+  height: 1em;
 
+  margin-top: -0.5em;
 
+  -webkit-animation: spinner 1500ms infinite linear;
 
+  -moz-animation: spinner 1500ms infinite linear;
 
+  -ms-animation: spinner 1500ms infinite linear;
 
+  -o-animation: spinner 1500ms infinite linear;
 
+  animation: spinner 1500ms infinite linear;
 
+  border-radius: 0.5em;
 
+  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
 
+  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
 
+}
 
+
 
+/* Animation */
 
+
 
+@-webkit-keyframes spinner {
 
+  0% {
 
+    -webkit-transform: rotate(0deg);
 
+    -moz-transform: rotate(0deg);
 
+    -ms-transform: rotate(0deg);
 
+    -o-transform: rotate(0deg);
 
+    transform: rotate(0deg);
 
+  }
 
+  100% {
 
+    -webkit-transform: rotate(360deg);
 
+    -moz-transform: rotate(360deg);
 
+    -ms-transform: rotate(360deg);
 
+    -o-transform: rotate(360deg);
 
+    transform: rotate(360deg);
 
+  }
 
+}
 
+@-moz-keyframes spinner {
 
+  0% {
 
+    -webkit-transform: rotate(0deg);
 
+    -moz-transform: rotate(0deg);
 
+    -ms-transform: rotate(0deg);
 
+    -o-transform: rotate(0deg);
 
+    transform: rotate(0deg);
 
+  }
 
+  100% {
 
+    -webkit-transform: rotate(360deg);
 
+    -moz-transform: rotate(360deg);
 
+    -ms-transform: rotate(360deg);
 
+    -o-transform: rotate(360deg);
 
+    transform: rotate(360deg);
 
+  }
 
+}
 
+@-o-keyframes spinner {
 
+  0% {
 
+    -webkit-transform: rotate(0deg);
 
+    -moz-transform: rotate(0deg);
 
+    -ms-transform: rotate(0deg);
 
+    -o-transform: rotate(0deg);
 
+    transform: rotate(0deg);
 
+  }
 
+  100% {
 
+    -webkit-transform: rotate(360deg);
 
+    -moz-transform: rotate(360deg);
 
+    -ms-transform: rotate(360deg);
 
+    -o-transform: rotate(360deg);
 
+    transform: rotate(360deg);
 
+  }
 
+}
 
+@keyframes spinner {
 
+  0% {
 
+    -webkit-transform: rotate(0deg);
 
+    -moz-transform: rotate(0deg);
 
+    -ms-transform: rotate(0deg);
 
+    -o-transform: rotate(0deg);
 
+    transform: rotate(0deg);
 
+  }
 
+  100% {
 
+    -webkit-transform: rotate(360deg);
 
+    -moz-transform: rotate(360deg);
 
+    -ms-transform: rotate(360deg);
 
+    -o-transform: rotate(360deg);
 
+    transform: rotate(360deg);
 
+  }
 
+}

+ 8 - 1
formulario.html
View File 

@@ -3,6 +3,7 @@
 
 <head>
 
 	<meta charset="utf-8">
 
 	<!-- <link type="text/css" rel="Stylesheet" href="css/menu.css" /> -->
 
+	<link type="text/css" rel="Stylesheet" href="css/spinner.css" />
 
 	<link type="text/css" rel="Stylesheet" href="css/normalize.css" />
 
 	<link type="text/css" rel="Stylesheet" href="css/skeleton.css" />
 
 	<link type="text/css" rel="Stylesheet" href="css/formulario.css" />
 
@@ -37,6 +38,7 @@
 
 
 	<div class="section">
 
 		<div class="container">
 
+		<div id="spinner" class="loading">Loading&#8230;</div>
 
 			<form>
 
 				<div class="row">
 
 					<h4>Datos personales</h4>
 
@@ -130,8 +132,10 @@
 
 
 		window.addEventListener('load', function() { 
 			var elems = document.querySelectorAll('input'), i;
 
-			document.getElementById("button").onclick = send;
 
+			var spinner = document.getElementById("spinner");
 
 			var bigbox = humane.create({baseCls: 'humane-bigbox', timeout: 1000})
 
+
 
+			document.getElementById("button").onclick = send;
 
 			bigbox.error = bigbox.spawn({addnCls: 'humane-bigbox-error'})
 
 
 			function updateModel(){
 
@@ -139,9 +143,11 @@
 
 					rivets.bind(elems[i], {user: user});
 
 			}
 
 			function send() {
 
+				spinner.style.display="block";
 
 				xhttp.onreadystatechange = function() {
 
 					if (xhttp.readyState == 4) {
 
 					  	var data =JSON.parse(xhttp.responseText);
 
+						spinner.style.display="none";
 
 				  		switch (xhttp.status) {
 
 				  			case 200:
 
 								bigbox.log(data.mensaje, { timeout: 5000, clickToClose: true });
 
@@ -160,6 +166,7 @@
 
 				xhttp.onreadystatechange = function() {
 
 				  if (xhttp.readyState == 4) {
 
 				  	var data =JSON.parse(xhttp.responseText);
 
+					spinner.style.display="none";
 
 				  	switch (xhttp.status) {
 
 				  		case 200:
 
 				  	    	user = data;