Añadir un spinner en JavaScript

Autor: | Última modificación: 31 de agosto de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post: ,

Un spinner es como cualquier otro elemento interactivo de una página web y, ara añadir un spinner en JavaScript, solo tendrás que establecer un par de elementos de los que te hablaremos en el presente artículo

Los spinners hace de la interfaz de usuario un gran lugar para conocer sobre el tema o las actividades de la página. Pueden ser el puntero del cursor o algún icono que cambia de color, entre muchos otros.

¿Qué es un spinner?

Al hablar de qué es un spinner, tal vez te venga a la mente ese objeto que, con uno o un par de dedos, puedes hacer girar. En otros casos, es solo un elemento que está girando en formas circulares, con una velocidad determinada.

En términos del desarrollo web y las aplicaciones que usamos habitualmente, nos encontramos con spinners de cualquier tipo en muchas ocasiones. Algunos sirven para representar la carga de archivos, texto o la misma carga de la página que estás abriendo. Un spinner no siempre luce con una forma circular, sino que también puede estar representado por puntos o líneas de diferente tamaño.

 un spinner en JavaScript
Tipos de spinner que se pueden crear con CSS

Si bien ya sabes cómo podría lucir un spinner en una página o aplicación web, ahora te falta saber cómo pintarlo o crearlo desde HTML, CSS o JavaScript.

Cómo añadir un spinner en JavaScript

En el caso del presente artículo, te presentamos cómo crear un spinner en JavaScript para que puedas implementarlo en tu proyecto. Lo crearemos en los ficheros donde se están escribiendo los elementos que podrán representar la interactividad entre el usuario y la misma configuración de la aplicación de escritorio o página o plataforma web.

El código para incluirlo es el siguiente:

🔴 ¿Quieres Aprender a Programar con Python? 🔴

Descubre el Full Stack Jr. Bootcamp - Aprende a Programar desde Cero de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp Aprende a Programar desde Cero por una semana

window.onload = function() {

spinner = document.getElementById (‘spinner’)

console.log (‘Inicio window.onload’)

obtenerMovimientos()

cargaMovimientosRequest.onload = mostrarMovimientos

agregarMovimientosRequest.onload = resultadoAgregar

Con el anterior ejemplo, puedes observar cómo, para agregar el spinner, solo debes enlazar el Id desde donde se encuentra el elemento que representará la carga de los elementos, archivos o de la misma página.

¿Cuál es el siguiente paso?

Ahora que ya conoces qué es un spinner, cómo se representa y, por otro lado, cómo añadir un spinner en JavaScript, puedes implementarlo en tus programas de código para que luzca mucho más interactivo y amigable con el usuario.

Este tipo de objetos son necesarios para realizar una interfaz de usuario perfecta. Si quieres conocer más tricks and tips sobre JavaScript, desarrollo web y otros conceptos de programación, no dudes en matricularte en nuestro Aprende a Programar desde Cero Full Stack Jr. Bootcamp. ¡Es una oportunidad perfecta para seguir aprendiendo y convertirte en un programador profesional en menos de un año!

[email protected]

¿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!