Tutorial de creación de un Loader Web utilizando CSS y JavaScript

por
Tiempo de lectura: 2 minutos

Los loaders web, también conocidos como spinners, son elementos visuales utilizados para indicar que una página web está cargando contenido o procesando una acción. En este tutorial, aprenderemos a crear un loader web personalizado utilizando CSS y JavaScript. El resultado será un loader animado y atractivo que podrás incorporar en tus proyectos web.

Requisitos previos:

  • Conocimientos básicos de HTML, CSS y JavaScript.
  • Un editor de código de tu elección.

Paso 1: Configuración del archivo HTML Comenzaremos creando un archivo HTML básico. Abre tu editor de código y crea un archivo HTML llamado «loader.html». Agrega la siguiente estructura básica:

<!DOCTYPE html>
<html>
<head>
  <title>Loader Web Tutorial</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="loader"></div>
  
  <script src="script.js"></script>
</body>
</html>

En este código, hemos vinculado un archivo CSS llamado «styles.css» y un archivo JavaScript llamado «script.js» al archivo HTML. Asegúrate de crear estos archivos en la misma ubicación que el archivo HTML.

Paso 2: Estilización del loader con CSS Abre el archivo «styles.css» y agrega el siguiente código CSS:

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin: 0 auto;
  margin-top: 200px;
}

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

En este código, hemos creado un div con la clase «loader» que actuará como nuestro loader web. Hemos aplicado estilos de borde, tamaño, colores y animación al div para crear un efecto giratorio. La animación «spin» hará que el loader gire continuamente.

Paso 3: Añadir funcionalidad con JavaScript Abre el archivo «script.js» y agrega el siguiente código JavaScript:

window.addEventListener('load', function() {
  var loader = document.querySelector('.loader');
  loader.style.display = 'none';
});

En este código, hemos agregado un evento de carga (load) al objeto window para asegurarnos de que el loader se oculte una vez que la página y su contenido hayan sido completamente cargados. Utilizamos la función querySelector para seleccionar el elemento con la clase «loader» y luego modificamos su estilo para establecer la propiedad display en «none», ocultándolo.

Paso 4: Visualización del loader Guarda todos los archivos y abre el archivo «loader.html» en tu navegador. Deberías ver el loader web en acción, girando continuamente. Una vez que la página se haya cargado por completo, el loader desaparecerá automáticamente debido al evento de carga que hemos agregado en JavaScript.

¡Enhorabuena! Has creado con éxito un loader web personalizado utilizando CSS y JavaScript. Ahora puedes integrar este loader en tus proyectos web para brindar una experiencia visual atractiva mientras se carga el contenido.

Post Views: 28

Deja un comentario