Cómo crear un botón loader con HTML, CSS y jQuery

por
Tiempo de lectura: 2 minutos

¡Buenas tardes!

Hoy os traigo un tutorial muy guay, y interesante sobre un elemento que puedes usar en tu web. ¡Comenzamos!

Un botón loader es una funcionalidad que permite a los usuarios saber cuándo se está procesando una tarea en segundo plano, como por ejemplo una petición a un servidor. En este tutorial aprenderás a crear un botón loader usando HTML, CSS y jQuery, paso a paso.

Paso 1: Crear el HTML En primer lugar, crearemos un botón HTML básico:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="./js/boton_loader.js"></script>
    <link rel="stylesheet" href="./css/boton_loader.css">
    <title>Boton Loader</title>
    <h1>Boton Loader</h1>
</head>

<body>
    <button id="btn_cargar">
        <span class="texto">Cargar</span>
        <div class="spinner ocultar"></div>
    </button>
</body>

</html>

Paso 2: Añadir estilos CSS A continuación, añadiremos algunos estilos CSS para darle un diseño atractivo a nuestro botón:

#btn_cargar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 30px;
    background-color:lightpink;
    color: black;
    border: none;
    cursor: pointer;
    border-radius: 7px;
}
#btn_cargar .spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    border: 3px solid rgb(169, 5, 136);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spinner 1s infinite linear;
}
@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

Paso 3: Añadir la funcionalidad del loader con jQuery Por último, añadiremos la funcionalidad del botón loader utilizando jQuery. Primero, añadimos un <span> y añadimos la clase .spinner que es a la que daremos forma de Spinner o indicador de carga que se mostrará cuando se haga clic en el botón y desaparecerá una vez pasadi el tiempo que indiquemos en el setTimeout.

$(document).ready(function () {
    $(".ocultar").css("display", "none");
    $("#btn_cargar").click(function () {
        $(".ocultar").css("display", "block");
        $(".texto").text("Cargando...");
        setTimeout(function () {
            $(".ocultar").fadeOut(100);
            $(".texto").text("Cargar")
        }, 7900);
    });
});

En resumen, crear un botón loader con HTML, CSS y jQuery es una tarea sencilla que agrega una funcionalidad útil a cualquier sitio web. Con este tutorial, ya tienes las herramientas.

¡Espero que os guste! 🥰

Post Views: 20

Deja un comentario