¿Cómo hacer un spinner loader con HTML y CSS?

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

Para hacer un spinner loader con HTML y CSS debes tener claro una serie de variables que son características del par de lenguajes sobre los que hablaremos en este post.

Este es uno de los elementos que más se utiliza en la creación de páginas web, pues es el encargado de representar, de forma animada y mucho más amigable al usuario, cosas que están pasando en el programa o acciones que se esperan de él.

¿Qué es un spinner?

Un spinner es un elemento que gira a la misma velocidad y al mismo lado (si así se establece) cuando el usuario lo activa. Como te comentamos en el artículo acerca del spinner en JavaScript, en términos de realización y desarrollo de aplicaciones o plataformas web, se utiliza para representar diferentes actividades, como puede ser la carga de archivos, entre otras.

Cómo hacer un spinner loader con HTML y CSS

Un spinner loader corresponde a la idea de que algo está esperando por cargarse, se está cargando o está próximo a completarse. Para pintar y hacer un spinner loader con HTML y CSS, debes emplear un fichero para cada uno de ellos.

Pintarlo en HTML

En primer lugar, para hacer un spinner loader con HTML y CSS, deberás adjuntar tu elemento y pintarlo en el fichero HTML. Aquí deberás establecer diferentes etiquetas propias del lenguaje de marcado y crear una clase que simbolice la presencia del spinner loader.

En este caso, será representada de la siguiente manera: «lds – dual – ring spinner – off» id = «spinner».

#en el fichero html para pintarlo

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

<tbody id = «cuerpo-tabla»>

<tr>

<td colspan = «6»>

<div class = «lds – dual – ring spinner – off» id = «spinner»> </div>

</td>

</tr>

<! — Aquí queremos cargar la lista de movimientos –>

</tbody>

De esta manera, ya habremos pintado el spinner y el usuario podrá observar dónde tendrá que cargar la lista de movimientos.

Para agregar estilos al spinner loader

Una vez tengamos pintado nuestro spinner a la aplicación, el siguiente paso para hacer un spinner loader con HTML y CSS es agregarle estilos al elemento, adecuarlo y hacerlo mucho más relevante en tu programa de código.

En este caso, para nuestro spinner, etiquetaremos el elemento como .lds – dual – ring y le pasaremos tres variables que configurarán la forma en la que se verá. De igual manera, tendrás que establecer variables que configurarán el elemento después de empezar y una vez terminado de cargar. Por eso es que, por un lado, after, por ejemplo, tendrá más variables, pues el spinner estará en movimiento y, por otro lado, en el off el spinner no aparecerá.

#en el fichero css para agregarle estilos

.lds – dual – ring {

display: inline – block;

width: 88px;

height: 88px;

}

.lds – dual – ring: after {

content: «»;

display: block;

width: 64px;

height: 64px

margin: 8px;

border – radius: 50%;

border: 6px solid #999;

border – color: #999 transparent #999 transparent;

animation: lds – dual – ring 1.2s linear infinite;

}

.lds – dual – ring.spinner – off {

display: none;

}

Sigue aprendiendo sobre el sector IT

Si bien ya sabes cómo hacer un spinner loader con HTML y CSS, consideramos que aún es necesario que aprendas a enlazar en los ficheros donde se desarrollan los elementos de JavaScript o Python para las características funcionales de cualquier programa de código.

Si quieres seguir investigando acerca de la programación con Python, el desarrollo web y el sector IT, te recomendamos echarle un vistazo al temario de Aprende a Programar desde Cero Full Stack Jr. Bootcamp. ¡Solicita tu plaza y conviértete en un profesional en pocos meses!

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