Psychotik

solucionando marrones desde 2003

Diseño de precargadores con CSS3

Pertenece a  Destacados, Tips  el 4 Octubre
Preloader con css3

Aunque para que funcione siempre vamos a requerir, lógicamente, programación:

Un ejemplo

Código HTML:
‹div class="preloadA"›Cargador (ejemplo 1)‹/div›
Código CSS:
/* Creamos el elemento central, un circulo transparente con un borde */
.preloadA{
   display:block;
   position: relative;
   top: 50%;
   left: 50%;
   width: 100px;
   height: 100px;
   margin: 0px 0px 0px -50px;
   border:8px solid #FE9B00;
   box-shadow:0px 0px 8px #666;
   text-indent:-9999px;
   border-radius:50px;
   animation:ease-in-out 0.6s preloadA infinite alternate;
   -webkit-animation:ease-in-out 0.6s preloadA infinite alternate;
}
/* Le damos una animación sencilla, cambiando el ancho/color del borde y con un pequeño escalado para modificar su tamaño general */
@keyframes preloadA{
   0%{
      border:4px solid #18A7F3;
   transform:scale(0.8,0.8);
   }
   100%{
      transform:scale(1,1);
   }
}
@-webkit-keyframes preloadA{
   0%{
      border:4px solid #18A7F3;
      transform:scale(0.8,0.8);
   }
   100%{
   transform:scale(1,1);
   }
}
/* Generamos un segundo circulo por darle algo más de movimiento con su correspondiente animación */
.preloadA:before {
   content: "";
   position: absolute;
   top:6px;
   left:6px;
   right:6px;
   bottom:6px;
   border:2px solid #18A7F3;
   border-radius:50px;
   animation:ease-in-out 0.6s preloadA2 infinite;
   -webkit-animation:ease-in-out 0.6s preloadA2 infinite;
}
@keyframes preloadA2{
   0%{
      border:4px solid #18A7F3;
      transform:scale(1,1);
      opacity:0;
   }
   100%{
   transform:scale(0,0);
   opacity:1;
   }
}
@-webkit-keyframes preloadA2{
   0%{
      border:4px solid #18A7F3;
      transform:scale(1,1);
      opacity:0;
   }
   100%{
      transform:scale(0,0);
      opacity:1;
   }
}

Resultado:

Precargador 1

Otro ejemplo

Código HTML:
‹div class="preloadB">Cargador (ejemplo 2)‹/div›
Código CSS:
/* Damos los estilos al bloque principal del precargador con un ancho del 100% para que ocupe el ancho de la pantalla */
.preloadB{
   display:block;
   position: relative;
   width: 100%;
   height: 5px;
   background:#fff;
   box-shadow:0px 0px 8px #999;
   border-top:1px solid #ccc;
   text-indent:-9999px;
   border-radius:3px;
   overflow:hidden;
}
/* Generamos el elemento que dará la sensación de barra cargándose */
.preloadB:before{
   content:"";
   display:block;
   height:5px;
   animation:ease-in-out 5s preloadB infinite;
   -webkit-animation:ease-in-out 5s preloadB infinite;
   /* infinite solo lo utilizamos para el ejemplo, en realidad debería utilizarse forwards */
position:absolute;
   top:0px;
   left:0px;
   /* Generamos una sombra pequeña en el lado derecho con los elementos gradient/linear-gradient para los distintos navegadores */
   background: #fff;
   background: -moz-linear-gradient(left, #18a7f3 0%, #18a7f3 78%, #d9fcfb 100%);
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,#18a7f3), color-stop(78%,#18a7f3), color-stop(100%,#d9fcfb));
   background: -webkit-linear-gradient(left, #18a7f3 0%,#18a7f3 78%,#d9fcfb 100%);
   background: -o-linear-gradient(left, #18a7f3 0%,#18a7f3 78%,#d9fcfb 100%);
   background: -ms-linear-gradient(left, #18a7f3 0%,#18a7f3 78%,#d9fcfb 100%);
   background: linear-gradient(to right, #18a7f3 0%,#18a7f3 78%,#d9fcfb 100%);
}
/* Y la animación muy sencilla, cambiando el ancho de 0% a 100% */
@keyframes preloadB{
   0%{
      width:0%;
   }
   100%{
      width:100%;
   }
}
@-webkit-keyframes preloadB{
   0%{
      width:0%;
   }
   100%{
      width:100%;
   }
}

Resultado:

Precargador 2

Y otro ejemplo más

Código HTML:
‹div class="preloadC">Cargador (ejemplo 3)‹/div›
Código CSS:
/* Creamos el elemento central */
.preloadC{
   display:block;
   position: relative;
   width: 150px;
   height: 25px;
   background:#fff;
   text-indent:-9999px;
   border-radius:13px;
   overflow:hidden;
   background:rgba(255,255,255,0.3);
   margin:0px auto;
   position:relative;
   box-shadow:0px 0px 10px #999;
   border:5px solid rgba(255,255,255,0.6);
}
/* Creamos un elemento animado principal y otro secundario, con lel 50% de velocidad */
.preloadC span:after,
.preloadC span:before{
   content:"";
   float:left;
   width:20px;
   height:100%;
   position:absolute;
   top:0px;
   left:0px;
   border-radius:13px;
}
.preloadC span:before{
   background:#e1e1e1;
   animation:ease-in-out 1.8s preloadC infinite;
   -webkit-animation:ease-in-out 1.8s preloadC infinite;
}
.preloadC span:after{
   background:#18A7F3;
   animation:ease-in-out 3.6s preloadC infinite;
   -webkit-animation:ease-in-out 3.6s preloadC infinite;
}
@keyframes preloadC{
   0%{
      left:0%;
   }
   50%{
      left:100%;
      margin-left:-20px;
   }
   100%{
      left:0%;
   }
}
@-webkit-keyframes preloadC{
   0%{
      left:0%;
   }
   50%{
      left:100%;
      margin-left:-20px;
   }
   100%{
   left:0%;
   }
}

Resultado:

Precargador 3

¡Ale!, a probar lo que se os pase por la cabeza.


Volver atrás

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »