Cómo crear una página de redirección con un loader gráfico
En ocasiones, es posible que deseemos redirigir a los visitantes de nuestro sitio web a otra página. Por ejemplo, podemos querer llevar a los usuarios a una página de destino después de que completen un formulario de registro, o podemos tener una nueva versión de nuestro sitio web que deseamos que los usuarios visiten. En cualquier caso, una página de redirección puede ser una solución efectiva. Además, agregar un loader gráfico a la página puede mejorar la experiencia del usuario al mostrar que algo está sucediendo en segundo plano.
En este artículo, veremos cómo crear una página de redirección con un loader gráfico utilizando HTML y CSS.
Creando la estructura HTML
Para comenzar, crearemos un archivo HTML básico con un título, un encabezado y un cuerpo. En el cuerpo, agregaremos un loader gráfico y un mensaje de «Cargando web…». También agregaremos una imagen con el logo de la página inicial.
<!DOCTYPE html>
<html>
<head>
<meta charset=»UTF-8″>
<title>Redirección a otra página web</title>
<style>
/* Estilos del loader gráfico */
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin: auto;
}/* Animación del loader gráfico */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}/* Estilos del logo */
.logo {
display: block;
margin: 20px auto;
width: 200px;
height: auto;
}/* Estilos del mensaje de «Cargando web…» */
.loading-text {
text-align: center;
font-size: 24px;
margin-top: 20px;
}
</style>
</head>
<body>
<!– Logo de la página de destino –>
<img class=»logo» src=»https:/……/logo-pagina-inicial.png» alt=»Logo»><!– Loader gráfico –>
<div class=»loader»></div><!– Mensaje de «Cargando web…» –>
<div class=»loading-text»>Cargando web…</div><!– Script para redireccionar a la página de destino –>
<script>
window.location.href = «https://www.otra-web.com»;
</script>
</body>
</html>
En este ejemplo, hemos agregado una clase CSS llamada .loader que define los estilos del loader gráfico. La animación del loader gráfico se define en la regla @keyframes spin. Además, hemos agregado una clase CSS llamada .logo que define los estilos de la imagen del logo, y una clase CSS llamada .loading-text que define los estilos del mensaje de «Cargando web…».
Agregando la redirección
Ahora que tenemos una estructura básica de HTML y los estilos para nuestro loader gráfico y otros elementos, podemos agregar el código que redirige a los visitantes a la página de destino. Para hacer esto, agregaremos un script en el cuerpo del documento que utiliza la propiedad window.location.href para redirigir a los usuarios a la página de destino. En nuestro ejemplo, la página de destino es «https://www.otra-web.com». Puedes reemplazar esta URL con la dirección de la página que desees.
<!– Script para redireccionar a la página de destino –>
<script>
window.location.href = «https://www.otra-web.com»;
</script>
Probando la página de redirección
Una vez que hayas creado tu página de redirección con un loader gráfico, es importante probarla para asegurarte de que funcione correctamente. Para hacerlo, guarda el archivo HTML y ábrelo en tu navegador web. Deberías ver la imagen del logo de la página inicial, seguida del loader gráfico y el mensaje de «Cargando web…». Después de unos segundos, deberías ser redirigido a la página de destino.
Conclusiones
En resumen, crear una página de redirección con un loader gráfico puede mejorar la experiencia del usuario al mostrarles que algo está sucediendo en segundo plano mientras se redirigen a la página de destino. Para hacer esto, se necesita un archivo HTML básico con un loader gráfico y un mensaje de «Cargando web…». También es importante agregar un script que redirija a los usuarios a la página de destino. Con estos pasos simples, puedes crear una página de redirección efectiva para tu sitio web.
