Bueno aquí van los pasos. Primero vamos a nuestra web.
1. En el head del sitio web tienes que poner la librería, para esto hay dos opciones.
1.1 Enlazas la librería desde el sitio dónde ellos lo tienen (puedes pegar el código exactamente como lo tengo yo aquí):
Código Javascript :
<script src="http://heartcode-canvasloader.googlecode.com/files/heartcode-canvasloader-min-0.9.1.js"></script>
1.2 O puedes descargas la librería y la enlazas desde un directorio de tu sitio.
¿Cómo descargar la librería? Sencillo, le das click a este
enlace. Luego tienes que dar click derecho sobre el código que se acaba de abrir (no selecciones nada, solo da click derecho) y luego escoges la opción "Guardar como...", no cambies el nombre, sencillamente guárdalo con el nombre que tiene por defecto.
Después de descargar la librería solo basta enlazarla así:
Código Javascript :
<script src="heartcode-canvasloader-min.js"></script>
NOTA: El directorio puede variar, pero tu ya sabrás como enlazar ese archivo según el lugar dónde lo tengas.
2. Después de enlazar la librería con alguna de las dos maneras que te explique anteriormente. Ahora si vamos a
Heartcode y lo que tenemos que hacer en este sitio es configurar el loader como queramos, ya sea ovalado, rectangular, que vaya despacio o rápido y cuando estemos satisfechos con el loader el sitio nos va a general un código.
2.1 Bajamos hasta encontrar el botón morado que dice: "Copy custom snippet to clipboard" y ese código lo pegamos en ya sea en un nuevo archivo .JS y lo enlazamos a nuestro sitio o directamente en el sitio web.
Te dejo un Fiddle Para que veas como tiene que estar más o menos tu sitio web.
Click aquí para ver el ejemploTe recomiendo que le eches una buena mirada para que lo comprendas bien.
¿Te quedaron dudas? ¡ Pregúntame que para ayudar estoy!
