Una ruleta de carga es un elemento de interfaz fundamental para mejorar la experiencia de usuario. Este simple elemento nos permite comunicar que la petición, sea cual sea, está ejecutándose y requiere un poco de paciencia y tiempo. En este post, te enseñaremos cómo crear una ruleta de carga con HTML, CSS y JavaScript para dar feedback al usuario en momentos de espera.
¿Cómo crear una ruleta de carga?
Para crear una ruleta de carga, lo primero que debemos hacer es crear un código HTML que sea coherente con el estilo que tendrá nuestra ruleta. A este código, sea creado con la etiqueta que sea, le daremos una clase que identifique esa sección como la que contendrá nuestra ruleta. En nuestro caso, hemos creado un div con la propiedad class=”loader” para crea tu propia ruleta.
Dependiendo del tamaño de tu proyecto, será importante definir dónde ubicar este código HTML. Para ello, es bueno pensar en la función de este código y asociarlo al módulo en el que se manejen elementos con funciones similares. Nosotros hemos decidido manejar nuestro HTML desde un módulo que controla la vista. A continuación, te mostramos cómo se ve nuestro código para la ruleta:
export function buildTweetListSpinner ( ) {
return `<div class= “loader”>
<div></div>
<div></div>
<div></div>
<div></div>
</div>`;
}
Ahora, el siguiente paso en el proceso de la ruleta es definir el tipo de animación que queremos que tenga este spinner o ruleta personalizada. Para esto, crearemos un archivo CSS en el que estilizaremos nuestra ruleta. En este post, no te enseñaremos cómo crear estos elementos, pues para ello puedes revisar nuestros posts sobre cómo animar un loader en CSS, cómo animar un spinner en CSS, cómo diseñar un spinner básico en CSS y cómo animar un loader de ondas en CSS.
Una vez hemos logrado crear una ruleta de carga o ruleta personalizada, deberemos pinchar el archivo en el que se encuentra dentro de nuestro index.html. Para ello, deberemos insertar una etiqueta link a la ruleta que tenga una propiedad rel con el valor stylesheet y un href que apunte al archivo que queremos. En nuestro caso, nuestro archivo se llama spinner.css, por lo que hemos insertado la siguiente línea de código:
<link rel=”stylesheet” href=”spinner.css”>
¿Qué hacer al crear una ruleta de carga?
Ahora que sabemos cómo hacer una ruleta y hemos logrado crear una ruleta de carga o ruleta personalizada y ponerla en funcionamiento, deberemos decidir qué hacer con ella. En nuestro caso, queremos que esta ruleta se vea mientras nuestro proyecto hace una petición de datos a una API y estos datos se pintan en pantalla. Entonces, tenemos que definir qué elemento de nuestro código deberá controlar este comportamiento de la ruleta javascript . Si estamos usando el patrón modelo vista controlador, el encargado será nuestro controlador, pues es quien gestiona la interacción entre los datos y el navegador.
Dentro del controlador o del módulo desde el que hayas decidido controlar tu ruleta de carga, deberás importar tu código HTML. En nuestro caso, basta con importar la función creada antes del archivo correspondiente.
import {buildTweetListSpinner} from “./TweetView.js”;
Ahora, después de saber cómo hacer una ruleta, deberemos definir la línea de código en la que aparece y la línea en la que desaparece. Una vez definidas estas líneas, deberemos ejecutar las acciones. Para crear una ruleta JavaScript de carga y hacer que aparezca en nuestro controlador, basta con insertar la función HTML que hemos creado de la siguiente manera:
//ruleta html
const spinnerTemplate = buildTweetListSpinner ( );
Recuerda que la línea anterior nos devuelve un HTML en formato string, pues lo hemos creado desde JavaScript gracias al backtick. Entonces, el siguiente paso será mostrar este string en el DOM. Para ello, deberemos insertar el HTML creado dentro de un elemento o nodo HTML del DOM. El concepto que nos permite hacer esto es la propiedad innerHTML. Esta propiedad nos permite sobrescribir el código del nodo con el que le otorguemos.
Ahora, basta con usar alguno de los métodos para seleccionar nodos del DOM y elegir el nodo que queremos sobrescribir. En nuestro caso, queremos elegir el nodo encargado de pintar los datos (que ya hemos guardado en la variable tweetListElement). Luego, con la propiedad innerHTML podemos determinar el código a insertar, que en nuestro caso es spinnerTemplate:
tweetListElement.innerHTML = spinnerTemplate;
Ahora que hemos logrado cómo hacer una ruleta de carga y montarla en el DOM, el siguiente paso es eliminar la ruleta JavaScript cuando los datos hayan cargado. Para ello, podemos usar el método remove de JavaScript o la propiedad classList de JavaScript.
Ahora que sabes cómo crear una ruleta de carga con HTML, CSS y JavaScript, ¡te invitamos a que sigas aprendiendo sobre la creación de elementos para el frontend! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a dominar estos y otros lenguajes de programación para crear todo tipo de proyectos web. ¿A qué esperas para dar este paso en tu formación? ¡Matricúlate ya y triunfa en el mercado laboral IT!
