Existen muchos elementos animados que son parte de nuestro día a día en la web moderna. Los elementos que nos comunican la idea de que un recurso está cargando son probablemente el elemento animado más común. Lo vemos cada vez que un vídeo se detiene y cada vez que nuestro internet falla. Por ello, cada página web tiene una forma diferente de representar esta idea, sea cambiando el elemento que carga, su color o su velocidad. En este post, te enseñaremos cómo diseñar un spinner básico en CSS para insertarlo en tu página web.
¿Qué haremos en este post?
En posts previos te hemos enseñado cómo animar un spinner en CSS utilizando las propiedades rotate y border-color. En esta ocasión, te enseñaremos cómo diseñar un spinner básico en CSS, tomando como referencia lo que hemos creado en ese artículo.
Entonces, sabemos que tenemos un círculo con dos barras curvas opuestas rotando a una velocidad de 1.5s. Ahora, lo que queremos es que este spinner aparezca cuando la página web esté cargando. Para comunicar aún más que la página web está momentáneamente congelada, queremos que tenga encima una capa de color negro con opacidad y que nuestro spinner sea de color blanco, centrado encima de esta capa.
A continuación, te enseñaremos cómo diseñar exactamente este aspecto. Sin embargo, puedes tomar nuestras líneas de código y consejos para diseñar un spinner básico en CSS de cualquier otra manera. Puedes ver ejemplos de distintos tipos de spinner en esta librería de animaciones.
¿Cómo diseñar un spinner básico en CSS?
Lo primero que haremos para diseñar un spinner básico en CSS es ubicarlo en el espacio. Antes hemos dicho que queremos centrar nuestro spinner. Para esto, podemos insertarlo primero dentro de un contenedor div. En el post anterior hemos creado nuestro spinner directamente como un elemento div, pero para poder situarlo en el espacio, necesitamos que esté contenido dentro de otro elemento.
Por lo tanto, crearemos un elemento div padre que se llame .spinner-container. A este elemento le daremos las siguientes propiedades:
.spinner-container {
width: 100vw
height: 100vh
display: flex
justify-content: center
align-items: center
}
Las líneas de código anteriores hacen que el contenedor padre de nuestro spinner tenga el ancho y alto total del viewport. Recordemos que usar unidades de medida relativas, como vh y vw, nos permiten hacer que nuestros elementos tengan un diseño responsive. Es decir, que dependan de las características de la máquina en la que son visualizados; en este caso, dependen del ancho y alto de la ventana del navegador.
Para centrar nuestro elemento .spinner, le hemos dicho al contenedor que utilice el sistema de posicionamiento avanzado Flexbox y que centre sus elementos tanto en el eje principal como en el eje secundario. Esto hará que, ocupe lo que ocupe la ventana, el spinner siempre se encuentre en el centro.
Ahora, para diseñar un spinner básico en CSS como el que queremos, también debemos determinar distintas propiedades de color. Como nuestro elemento div padre ocupa todo el espacio de la pantalla, podemos insertar en este la capa de color negro con opacidad. Esta será la que nos permita comunicar que la página web está congelada. Para hacer esto, basta con insertar la siguiente línea de código en el selector de clase .spinner-container:
background-color: #0009
Esta propiedad define que tenemos un color negro con noventa por ciento de opacidad. Si tienes dudas sobre cómo escribir colores y opacidades en CSS, te invitamos a que leas nuestro post sobre el color en CSS. Para cambiar el color del spinner, basta con cambiar la propiedad border-color que habíamos insertado en el selector de clase .spinner. Nosotros definiremos nuestro color con la palabra clave white, porque nuestro color de fondo tiene poca transparencia, pero tú puedes jugar con cualquier combinación de colores que desees.
Ten presente que, para hacer que tu capa de color negro esté siempre encima del contenido de tu página, deberás definir un valor z-index alto, por ejemplo un z-index: 9999.
¿Cuál es el siguiente paso?
Ahora que sabes cómo diseñar un spinner básico en CSS usando las distintas propiedades de color y posicionamiento, ¡es hora de que empieces a crear y diseñar tus propias líneas de código! Por ello, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp. Allí, entre muchas otras cosas, seguirás aprendiendo sobre los distintos lenguajes de programación para la web y sus posibilidades. Además, en el transcurso del bootcamp, crearás y diseñarás tu propia página web con la guía de nuestros profesores. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web? ¡Anímate a inscribirte!
