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 loader 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 CSS 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”.
🔴 ¿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#en el fichero html para pintar el spinner HTML o spinner loader
<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 HTML 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 CSS 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 HTML, 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 loader HTML estará en movimiento y, por otro lado, en el off el spinner CSS no aparecerá.
#en el fichero css para agregarle estilos al loader html
.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;
}
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!
