- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the cursor to wait in JavaScript?
In this article, we are going to look at some cursor settings and their behaviors. Currently, there are different kind of cursors as provided by any system that includes a pointer, hand, insert, wait, pointer-wait, and many others.
With the help of this article, we would be able to configure the wait pointer when required. This pointer will prevent the user from clicking a button unnecessarily and stops any further execution of similar events until the previous event is completed.
We can directly use the CSS property to display the cursor as waiting but since we need the dynamic impact on showing the cursor, we would be doing this with the help of plain JavaScript.
Some common examples where waiting is applied on the cursor −
While processing a payment, so the user does not initiate the cursor twice.
While downloading a file so that no multiple files are downloaded for the same process.
Example
In the below example, we create a simple HTML button. Whenever the user clicks the button it will tell the user to wait and will not let him execute any other action. We will use the addEventListener() function from JavaScript for achieving this functionality. With the help of this, we would be able to control the behavior of events like click, hover, etc.
#Filename: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
display: flex;
padding-top: 20px;
}
#btn {
height: 50px;
width: 100px;
border-radius: 10px;
background-color: gray;
font-size: 1.1rem;
}
</style>
</head>
<body>
<h1 style="color: green;">Welcome to Tutorials Point</h1>
<p>The cursor will go into waiting on clicking this button.</p>
<div class="box">
<button id="btn">Click me</button>
</div>
<script>
document.getElementById("btn")
.addEventListener("click", function() {
document.body.style.cursor = "progress";
document.getElementById("btn")
.style.backgroundColor = "gray";
document.getElementById("btn")
.style.cursor = "progress";
});
</script>
</body>
</html>Output
