<div class="modal" v-if="cargando">
<div></div>
<div class="modalboxQWH">
<div class="showInfoQWH">
<div class="spinner">
<div class="contenedor-contenedor giratorio1">
<div class="círculo1"></div>
<div class="círculo2"></div>
<div class="circle3"></div>
<div class="círculo4"></div>
</div>
<div class="contenedor-contenedor giratorio2">
<div class="círculo1"></div>
<div class="círculo2"></div>
<div class="circle3"></div>
<div class="círculo4"></div>
</div>
</div>
<p class="countdown">Cargando...</p>
<!-- <div class="blank"></div> -->
</div>
</div>
</div>
/* carga*/
.modal {
posición: fija;
izquierda: 0;
arriba: 0;
ancho: 100%;
altura: 100%;
índice z: 100;
color de fondo: rgba(0, 0, 0, 0.2);
}
.modalboxQWH {
posición: absoluta;
izquierda: 50%;
arriba: 50%;
transformar: traducir (-50%, -50%);
ancho: 80%;
/* altura mínima: 60%; */
/* color de fondo: #fff; */
radio del borde: 10px;
/* color de fondo: #fff; */
radio del borde: 10px;
relleno: 6vw 0;
}
.showInfoQWH {
ancho: 100%;
/* altura: 80%; */
/* altura mínima: 110vw; */
/* estilo de lista: ninguno; */
/* relleno: 0; */
/* margen: 0; */
/* alineación de texto: izquierda; */
/* desbordamiento: desplazamiento; */
/* color de fondo: #fff; */
}
.cuenta regresiva {
margen superior: 8vw;
tamaño de fuente: 4.5vw;
color: rgb(57, 118, 191);
}
/* Efectos de animación*/
.hilador {
margen: 0vw automático;
ancho: 15vw;
altura: 15vw;
posición: relativa;
}
.contenedor1>div,
.contenedor2>div,
.contenedor3>div {
ancho: 4vw;
altura: 4vw;
color de fondo: rgb(57, 118, 191);
radio de borde: 100%;
posición: absoluta;
-webkit-animation: rebote-delay 1.2s facilidad infinita de entrada y salida;
animación: rebote retardo 1,2 s infinita facilidad de entrada y salida;
-webkit-animation-fill-modo: ambos;
modo de relleno de animación: ambos;
}
.spinner .spinner-contenedor {
posición: absoluta;
ancho: 100%;
altura: 100%;
}
.contenedor2 {
-webkit-transform: rotarZ (45 grados);
transformar: rotarZ (45 grados);
}
.contenedor3 {
-webkit-transformación: rotarZ (90 grados);
transformar: rotarZ (90 grados);
}
.circulo1 {
arriba: 0;
izquierda: 0;
}
.círculo2 {
arriba: 0;
derecha: 0;
}
.circulo3 {
derecha: 0;
abajo: 0;
}
.circulo4 {
izquierda: 0;
abajo: 0;
}
.contenedor2 .circulo1 {
-retraso-animación-webkit: -1,1 s;
retardo de animación: -1,1 s;
}
.contenedor3 .circulo1 {
-webkit-animación-retraso: -1s;
retardo de animación: -1s;
}
.contenedor1 .circulo2 {
-retraso-de-animación-webkit: -0,9 s;
retardo de animación: -0,9 s;
}
.contenedor2 .circulo2 {
-retraso-animación-webkit: -0,8 s;
retardo de animación: -0,8 s;
}
.contenedor3 .circulo2 {
-retraso-animación-webkit: -0,7 s;
retardo de animación: -0,7 s;
}
.contenedor1 .circulo3 {
-retraso-animación-webkit: -0,6 s;
retardo de animación: -0,6 s;
}
.contenedor2 .circulo3 {
-retraso-animación-webkit: -0,5 s;
retardo de animación: -0,5 s;
}
.contenedor3 .circulo3 {
-retraso-animación-webkit: -0,4 s;
retardo de animación: -0,4 s;
}
.contenedor1 .circulo4 {
-retraso-animación-webkit: -0,3 s;
retardo de animación: -0,3 s;
}
.contenedor2 .circulo4 {
-retraso-animación-webkit: -0,2 s;
retardo de animación: -0,2 s;
}
.contenedor3 .circulo4 {
-retraso-animación-webkit: -0,1 s;
retardo de animación: -0,1 s;
}
@-webkit-keyframes rebotedelay {
0%,
80%,
100% {
-webkit-transformación: escala (0);
}
40% {
-webkit-transformación: escala(1);
}
}
@keyframes rebotedelay {
0%,
80%,
100% {
transformar: escala (0);
-webkit-transformación: escala (0);
}
40% {
transformar: escala(1);
-webkit-transformación: escala(1);
}
}