Reading time: 2 minutes
Good afternoon!
Today I bring you a very cool and interesting tutorial about an element you can use on your website. Let’s get started!
A loader button is a functionality that allows users to know when a background task is being processed, such as a request to a server. In this tutorial, you will learn how to create a loader button using HTML, CSS, and jQuery, step by step.
Step 1: Create the HTML First, we will create a basic HTML button:
<!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>Loader Button</title>
<h1>Loader Button</h1>
</head>
<body>
<button id="btn_cargar">
<span class="texto">Load</span>
<div class="spinner hide"></div>
</button>
</body>
</html>
Step 2: Add CSS styles Next, we will add some CSS styles to give our button an attractive design:
#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);
}
}
Step 3: Add loader functionality with jQuery Finally, we will add the loader button functionality using jQuery. First, we add a <span> and give it the class .spinner which will be styled as a spinner or loading indicator that will be displayed when the button is clicked and will disappear after a specified time using setTimeout.
$(document).ready(function () {
$(".hide").css("display", "none");
$("#btn_cargar").click(function () {
$(".hide").css("display", "block");
$(".texto").text("Loading...");
setTimeout(function () {
$(".hide").fadeOut(100);
$(".texto").text("Load");
}, 7900);
});
});
In summary, creating a loader button with HTML, CSS, and jQuery is a simple task that adds useful functionality to any website. With this tutorial, you now have the tools.
I hope you like it! :smiling_face_with_hearts:
