Crear una ruleta de carga con HTML, CSS y JavaScript

Autor: | Última modificación: 4 de noviembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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».

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:

export function buildTweetListSpinner ( ) {

return `<div class= «loader»>

<div></div>

<div></div>

<div></div>

<div></div>

</div>`;

}

Ahora, el siguiente paso es definir el tipo de animación que queremos que tenga este spinner. 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, deberemos pinchar el archivo en el que se encuentra dentro de nuestro index.html. Para ello, deberemos insertar una etiqueta link 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 logramos crear una ruleta de carga 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. 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, 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 de carga y hacer que aparezca en nuestro controlador, basta con insertar la función HTML que hemos creado de la siguiente manera:

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 crear una ruleta de carga y montarla en el DOM, el siguiente paso es eliminar la ruleta cuando los datos hayan cargado. Para ello, podemos usar el método remove de JavaScript o la propiedad classList de JavaScript.

¿Cuál es el siguiente paso?

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!