Preloader Sencillo HTML, CSS y Javascript

Muy buenas a todos... Yo soy Nad GarDez, y aquí empiezo un nuevo proyecto, sin mas que esperar que compartir mis conocimientos (y mi ruta de aprendizaje) con ustedes, con todos aquellos interesados aprender un poco mas del gran mundo de la programación. Para este primer episodio, les voy a mostrar un Preloader hecho con unas sencillas lineas de código en HTML, CSS, y Javascript. Iré explicando cada segmento, y si están interesados en descargar el archivo fuente estará disponible en mi cuenta de Github. Sin mas preámbulo ¡empezamos!

Cargando

Seccion HTML

Vamos desde el esqueleto; en nuestra seccion HTML vamos a tener 3 div:

• Div contenedor: como su nombre lo indica, este va a contener las animaciones, a este podemos aplicarle el color de fondo de nuestra pagina para que parezca invisible, también podemos posicionar como queramos, ya que las animaciones no se desajustaran (el codigo esta pensado para esos casos).
• Div fijo: este sera de forma circular, y ademas va a tener un mensaje dentro, puede ser el que tu quieras, pero yo le puse "cargando". Por supuesto el color, el fondo y la fuente pueden ser ajustada a tus necesidades.
• Div Movil: Este va a ser también circular, va tener el mismo tamaño que el div anterior, pero va a tener sus bordes con un tamaño considerable y de distintos colores.

No se preocupen si todavía no lo entienden, iré explicando mejor en las siguientes secciones. Aquí el código resultante:

<div class="contenedor" id="contenedor-preloader">
         <div class="circulo-fijo" id="circulo-fijo">
                  <h2 class="tit">Cargando</h2>     
         </div>
    <div class="circulo-movil" id="circulo-movil">
       </div>
</div>

Sección CSS

Como podemos ver en la sección de código anterior hemos colocado las siguientes clases para poder trabajar con CSS 

• .contenedor
• .circulo-fijo
• .tit
• .titulo-movil 

Con los estilos CSS podemos adaptar la animación a nuestras necesidades de posición, color, tamaño, o fuente.

Los estilos para la clase .contenedor son bastante sencillos, un margen superior, izquierdo,derecho,(lo suficiente para centrar o usar la etiqueta center) ancho y alto, estos estilos los puedes cambiar, e incluso agregarle otros si deseas. El color de fondo en nuestro div sera heredado, o si quieres uno en especifico puedes ajustar con "background-color" y darle el valor que desees. También es posible darle un posicionamiento absoluto o flotante. En cuanto a los tamaños relativos, debes tener cuidado, ya que si colocas el mismo valor en porcentaje para el alto y ancho se dibujara un ovalo en vez de un circulo; ¿porque? esto se debe a que el ancho y el alto de la pantalla o de los div casi siempre son de diferente medida.

.contenedor {
          margin-top:5%;
          margin-left:20%;//en px en % o sustituimos por una etiqueta center en HTML
          width:310px;
         height:310px;
}

Los estilos para el  .circulo-fijo tenemos la profundidad (eje z), con un "z-index" positivo logramos que se muestre arriba de nuestro circulo móvil. ancho, alto,posicionamiento absoluto, color de fondo, texto centrado y bordes redondeados. Es importante que el ancho y el alto sean del mismo tamaño, y el borde redondeado sea de 50%, de lo contrario dibujaríamos una forma distinta al circulo (tal vez un ovalo o cuadrado con puntas redondeadas).

.circulo-fijo {
         background-color:blue;
         width:300px;
         height:300px;
         border-radius:50%;
         position:absolute;
         text-align:center;
}

Los estilos de la clase .circuloMovil, son un poco mas complicados.Vamos a configurar un borde grueso, redondeado, y de color; el inferior-izquierdo serán de un color y los restantes de otro colo. Posición absoluta, sin especificar porque (lo haremos con javascript) top o left. El alto y ancho debe ser igual al circulo anterior. No hace falta especificar un fondo, ya que este no se va a ver.

.circulo-movil {
         position:absolute;
         background-color:blue;
         width:300px;
         height:300px;
         z-index:-1;
         border-radius:50%;
         border-left: red 5px solid;
         border-top: red 5px solid;
         border-right: purple 5px solid;
         border-bottom: purple 5px solid;
}

Por ultimo tenemos los estilos del elemento .tit el cual es nuestro mensaje. Color de fuente, y un margen superior

.tit{
         margin-top:45%;
         color:white;
}

Ya tendríamos todos (o la mayoría) de los estilos terminados. las propiedades de posición "top" y "left" de la clase .circulo-movil las especificaremos con Javascript. Hasta ahora deberíamos ver dos círculos  estáticos uno debajo de otro, los toque finales estarán bajo el cargo del script de Javascript.

Sección Javascript

En esta sección, vamos a subdividir el código por tareas para mayor entendimiento. Aquí la lista de tareas

• Capturar la posición de id="contenedor-preloader" y guardarla en dos variables "x" y "y".
• Asignar "x" y "y" a las propiedades top y left de id="circulo-movil (medida en px).
• Asignar "x+5" y "y+5" a las propiedades top y left de id="circulo-fijo" (medida en px).
• Crear variable angulo.
• Crear función xNombre para hacer girar el div.
• Añadir un intervalo de tiempo para llamar a la función anteriormente creada.

Capturar la posición de id="contenedor-preloader" y guardarla en dos variables "x" y "y":

var elemento=document.getElementById("contenedor-preloader");
var y=elemento.offsetTop;
var x=elemento.offsetLeft;

Asignar "x" y "y" a las propiedades top y left de id="circulo-movil (medida en px).

var divFijo=document.getElementById("circulo-movil");
divFijo.style.top=y+"px";
divFijo.style.left=x+"px";

Asignar "x+5" y "y+5" a las propiedades top y left de id="circulo-fijo" (medida en px).

var divMovil=document.getElementById("circulo-fijo");
divMovil.style.top=y+5+"px";
divMovil.style.left=x+5+"px";

Y por ultimo...

var angulo=0;
setInterval(xnombre,50);
function xnombre(){
         angulo+=10;
         if(angulo==360){
                   angulo=0;
         }
         var a= document.getElementById("circulo-movil");
         a.style.transform="rotate("+angulo+"deg)";
}

Con esta ultima linea de código ya deberías tener tu animación corriendo perfectamente. Ojo pueden haber algunos navegadores que bloqueen la animación por seguridad, y te pregunten si quieres activarla.

Si al momento de hacerlo por ti mismo no te corre (por problemas de escritura) no te preocupes eso pasa muy a menudo, NO TE RINDAS1! chequea cada sentencia detenidamente hasta encontrar el error. Si te salio a la primera FELICIDADES!.

Bien aqui termina mi primer post para este blog, espero haya sido de su agrado y de utilidad. Les invito a segirme en twitter como:  @IranadJOSUE y @GardezNad