Creación de un sencillo spinner-loader CSS

Cómo hacer un Throbber sin problemas

by Tibor Kopca Date: 05-04-2021 desarollo web css programacion javascript


En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio web, por ejemplo, cuando hay una solicitud en ejecución y el resultado aún no se recupera.


¿Qué son?


Animación de carga, Loader, Spinner, Throbber, reciben muchos nombres, a veces engañosos porque no siempre giran. En realidad, Throbbers es su nombre oficial. Se llamen como se llamen, se supone que hacen lo mismo: mostrar una imagen en la interfaz de un programa que se anima para mostrar que el software está ocupado.

CSS_loader_Internet_explorer_gif

Esto significa que el sistema está realizando una acción en segundo plano, lanzando una aplicación, procesando peticiones, descargando contenidos, realizando cálculos intensivos o comunicándose con un dispositivo externo. Así, el usuario puede ver que tiene que esperar hasta que el proceso termine.
Esto es necesario muchas veces también en las interfaces de usuario de texto, donde no hay animación posible, por lo que se sustituye por un carácter de ancho fijo que se mueve cíclicamente entre las formas "|", "/", "-" y "" con el fin de crear un efecto de animación.

El Spinner es algo diferente a la barra de progreso, porque no muestra cuánto de la acción se ha completado. A menos que, por ejemplo, se añada un porcentaje numérico.
Hay muchos icónicos throbbers como el cursor de espera de Windows en forma de reloj de arena y seguramente usted reconoce esta típica animación throbber, como se ve en muchos sitios web.

 

CSS-loader-spinner-AJAX

Usar una animación CSS tiene la ventaja de que estamos evitando la petición de imágenes (.gif por ejemplo), eso significa que el cargador se mostraría incluso si el sistema o la transferencia es lenta o se detiene. Así es como los desarrolladores llegaron a usar CSS puro sobre las animaciones GIF que se usaban hace mucho tiempo en el desarrollo web.

CSS-loader-hourglass-windows

Bueno, basta de teorías, es hora de hacer nuestro propio y sencillo throbber/spinner/cargador.


Paso a paso


Utilizaremos codepen.io para mostrar el proceso de construcción, una gran herramienta en la que puedes probar rápidamente algunas piezas de código. Nuestro spinner va a ser un simple círculo que gira alrededor de su propio centro.

Lo primero que hay que hacer es crear un único elemento div donde se mostrará el spinner. Para orientarlo en CSS tendría el nombre de clase "loader".

<div class="loader"></div> 

A continuación, añadimos el código CSS:

.loader {
  width: 30px;
  height: 30px;
  background-color:grey;
  border: 30px solid #f3f3f3;
  margin:10% auto;
} 

Como podemos ver en esta imagen, se trata de un simple cuadrado con bordes fijados.
 
CSS-loader-codepen1

Ahora lo hacemos circular añadiendo border-radius:50% y damos color al borde izquierdo.

CSS-loader-codepen2

¡Ahora hazlo girar!


Por último, añadimos una animación a la clase loader que hace que el círculo gire eternamente con una velocidad de animación de 0.8 segundos. En la propiedad animation tenemos que escribir el nombre de la animación que se definirá en los keyframes - en este caso es "spinIT", el tiempo para completar la animación en segundos, el modo de mezcla será lineal y se ejecutará continuamente por el último atributo llamado infinite.
Adicionalmente lo decoramos con un poco de sombra.

Aquí está el código completo:

 .loader {
  width: 30px;
  height: 30px;
  border: 30px solid #f3f3f3;
  margin:5% auto;
  border-left: 30px solid #FF5D00;
  border-right: 30px solid #FF5D00;
  border-radius: 50%;
  animation: spinIT 0.8s linear infinite;
  filter: drop-shadow(0px 0px 8px gray)
} 

@keyframes spinIT {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 

 
CSS-loader-codepen3


Para aquellos navegadores que no soportan las propiedades de animación y transformación debemos añadir esta parte de código.

@-webkit-keyframes spinIT {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

Mantenerlo simple


Ahora bien, todo lo anterior sólo serviría para diseñar el spinner, pero para implementarlo realmente necesitamos un contenido que su tiempo de carga sea realmente mayor que unos pocos milisegundos. Esto se puede hacer cargando imágenes o archivos grandes.
Hemos utilizado imágenes de mayor tamaño, tomadas de placeimg.com - el llamado lorem ipsum de las imágenes. Con este enfoque podemos evitar también el almacenamiento en caché de los datos para poder simular mejor el tiempo de carga.

<body>
  <div class="image">
    <img src="https://placeimg.com/800/600/any">
<!--     <div class="loader"></div>    -->
  </div>
</body>

CSS añadido:

body{
  display:flex;
  justify-content:center;
  align-items:center;
}
.image{
  width:50vw;
  height:100vw;
  border:solid black;
  overflow:hidden;
}

Este es el aspecto que tiene sin el girador.


CSS-loader-codepen4

Ahora queremos hacer ese spinner en el lugar de la imagen hasta que se cargue. Colocamos el spinner dentro del contenedor con la imagen y lo centramos con CSS.

<body>
  <div class="image">
<img src="https://placeimg.com/800/600/any">
<div class="loader"></div>   
  </div>
</body>

CSS:

.image{
  width:500vw;
  height:100vw;
  border:solid black;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-items:center;
}

Ahora preparamos el resto del código, añadiendo id="img" al elemento img, porque lo que vamos a hacer es que un contenedor de imágenes no se muestre hasta que se cargue en memoria.

<img src="https://placeimg.com/800/600/any" id="img" class="hidden animated">

En el archivo CSS sería como sigue:
.hidden{
  display:none;
}
.animated{
  animation: animate 3s;
}
@keyframes animate{
  from{opacity:0 }
  to{opacity:1 }
}

Ahora estamos listos para JavaScript en la siguiente sección.

¡Ahora JavaScript hasta el fin!


Para el JS, añadimos un simple listener de eventos para ocultar el cargador cuando la imagen esté completamente cargada.
La última parte es añadir código para acceder a los elementos que vamos a manipular.
Primero añadimos un event listener a la ventana, que iniciaría la función autoejecutable al cargar el contenido.


No te equivoques, un archivo js externo o <script> debe ser colocado detrás de todo el código HTML para que el contenido de texto se cargue primero - en este momento es el spinner visible. Una vez cargado el código JS, se ejecutará el código dentro del eventlistener.

window.addEventListener("load", function(){
document.getElementById("loaderSpinner").style.display = "none";
document.getElementById("img").classList.remove('hidden');
document.getElementById("img").style.display = "block";
});

En la segunda fila podemos ver cómo detener el cargador, una vez que la imagen en sí se cargaría.
Y eliminamos la clase "hidden" de la imagen, para que sea visible.

See the Pen Loader_spinner by Tibor (@TiborKopca) on CodePen.

El código completo se puede ver aquí:https://codepen.io/TiborKopca/pen/NWbKeLG.

Carga de imágenes con la API de Fetch


Cuando se trata de la integración de JavaScript, podemos mostrar en la API Fetch de uno de nuestros compañeros de trabajo, Iveta Karailievova, echa un vistazo a sus artículos aquí> https://www.ma-no.org/en/search/?q=Iveta, escribió recientemente cómo usarlo.

Esta API básicamente obtiene recursos, en este caso una imagen desde la URL.

Alteramos un poco el código para implementar timeout al listener de eventos, esto nos permite posponer el tiempo de ejecución de la función para poder disfrutar mejor del spinner.


El código bifurcado se puede ver aquí > https://codepen.io/TiborKopca/pen/zYoOjQW.

Conclusión

Hay muchas formas de hacer un spinner personalizado, por ejemplo usando pseudoelementos CSS. Nosotros te mostramos el básico, pero sólo depende de tu imaginación cómo lo hagas al final. Aquí hay algunas posibilidades de inspiración para ver lo que se puede hacer.

https://freefrontend.com/css-loaders/

http://www.css-spinners.com/

https://tobiasahlin.com/spinkit/

https://loading.io/css/

https://dribbble.com/tags/throbber

Espero que te hayamos mostrado cómo se pueden crear fácilmente algunos throbble CSS personalizados para que tu sitio web sea aún más atractivo para todos.


Imagen de Tibor Kopca.

CSS_spinner_gif_cat

 
by Tibor Kopca Date: 05-04-2021 desarollo web css programacion javascript visitas : 1171  
 
Tibor Kopca

Tibor Kopca

From tinkering with computers as a teenager, through a career in datacenter he stepped into web development with full force and started coding. Absorbs all information like a sponge.
Fan of aerospace, engineering, information technologies and watches.

 
 
 

Artículos relacionados

Cómo enviar un correo electrónico desde un formulario de contacto HTML

En el artículo de hoy vamos a escribir sobre cómo hacer un formulario que funcione y que al pulsar ese botón de envío sea funcional y envíe el correo electrónico…

Imágenes de fondo responsivas con relación de aspecto fijo o fluido

¿Cuál es la forma más fácil de escalar las imágenes de fondo en los diseños responsivos? Utilizamos una antigua técnica y la mejoramos para cambiar con fluidez la ratio de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…

Validación de formularios HTML usando BULMA y vanilla JavaScript

Hoy vamos a escribir sobre los formularios de contacto y cómo validarlos usando JavaScript. El formulario de contacto parece ser una de las características principales de toda página web básica. Es…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Modo oscuro persistente con CSS y JS

Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

Javascript: los operadores Spread y Rest

En el artículo de hoy vamos a hablar de una de las características de la versión ES6 (ECMAScript 2015) de JavaScript que es el operador Spreadasí como el operador Rest. Estas…

Cookies HTTP: cómo funcionan y cómo usarlas

Hoy vamos a escribir sobre la forma de almacenar datos en un navegador, por qué los sitios web utilizan cookies y cómo funcionan en detalle. Continúa leyendo para averiguar cómo implementarlas…

Cómo superponer múltiples imágenes usando CSS?

CSS significa Hoja de Estilo en Cascada. Es un lenguaje de hojas de estilo que define la presentación del documento en un lenguaje de marcado como HTML. La hoja de estilo…

Cómo usar el Masking en CSS

Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración