En JavaScript, podríamos configurar fácilmente el cursor para esperar. En este artículo, veremos cómo vamos a hacer esto. En realidad, es una tarea bastante fácil, hay una propiedad de cursor CSS y tiene algunos valores y uno de los valores es wait . Usaremos la propiedad [cursor: wait] de CSS y controlaremos su comportamiento usando JavaScript.
Establecer el cursor en la espera podría ser útil en muchos casos, por ejemplo, si hacemos clic en el botón de pago completo en alguna página de transacción de pago, entonces deberíamos colocar el cursor en la espera justo después de hacer clic en el botón, para evitar el clic no deseado. en cualquier parte de la página hasta que se complete la transacción.
Ejemplo 1: en este ejemplo, crearemos un botón, cuando se haga clic en el botón, el cursor estará esperando. Para ello, utilizaremos la función addEventListener() de JavaScript. Con la ayuda de esto, podríamos controlar el comportamiento de eventos como hacer clic , pasar el mouse , etc.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<Style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: rgb(36, 36, 36);
}
#btn {
height: 50px;
width: 100px;
border-radius: 10px;
border: none;
outline: none;
background-color: rgb(2, 151, 2);
font-family: Impact, Haettenschweiler,
'Arial Narrow Bold', sans-serif;
font-size: 1.1rem;
}
</Style>
</head>
<body>
<div class="box">
<button id="btn">Click me</button>
</div>
<script>
document.getElementById("btn")
.addEventListener("click", function() {
document.body.style.cursor = "wait";
document.getElementById("btn")
.style.backgroundColor = "gray";
document.getElementById("btn")
.style.cursor = "wait";
});
</script>
</body>
</html>
Producción:
Ejemplo 2: para este ejemplo, usaremos el mismo método addEventListener() de JavaScript, usaremos el evento de desplazamiento y especificaremos dónde debe ir el cursor para esperar. En este caso, hemos creado dos contenedores. El cursor funcionará bien en el primer contenedor, pero en el segundo, el cursor irá a la espera.
HTML
<!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">
<Style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: rgb(36, 36, 36);
}
#box1 {
height: 100px;
width: 100px;
border-radius: 50%;
background-color: Green;
}
#box2 {
height: 100px;
width: 100px;
border-radius: 50%;
background-color: rgb(102, 11, 3);
margin: 5px;
cursor: wait;
}
</Style>
</head>
<body>
<div class="box">
<div id="box1"></div>
<div id="box2"></div>
</div>
<script>
document.getElementById("box2")
.addEventListener("hover", function() {
document.getElementById("box2")
.style.cursor = "wait";
});
</script>
</body>
</html>
Producción:
